HTML5 SVG雷电天劫特效

类似激光武器的动画特效

svg, feturbulence

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3365
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $poster = $('.poster'),
  $layer = $('div[class*="layer-"]'),
  w = $(window).width(), //window width
  h = $(window).height(); //window height

$(window).on('mousemove', function(e) {
  var offsetX = 0.5 - e.pageX / w, //cursor position X
    offsetY = 0.5 - e.pageY / h, //cursor position Y
    dy = e.pageY - h / 2, //@h/2 = center of poster
    dx = e.pageX - w / 2, //@w/2 = center of poster
    theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
    angle = theta * 180 / Math.PI - 90, //convert rad in degrees
    offsetPoster = $poster.data('offset'),
    transformPoster = 'rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; //poster transform

//get angle between 0-360
  if (angle < 0) { angle = angle + 360; }

$poster.css('transform', transformPoster);

$layer.each(function() {
    var $this = $(this),
      offsetLayer = $this.data('offset') || 0,
      transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)';
    $this.css('transform', transformLayer);
  });

});

var timeline = new TimelineMax({ repeat: -1, yoyo: true }),
    feTurb = document.querySelector('#heatturb');

timeline.add(
  new TweenMax.to(feTurb, 8, {
    onUpdate: function() {
      var bfX = this.progress() * 0.01 + 0.025, //base frequency x
        bfY = this.progress() * 0.003 + 0.01, //base frequency y
        bfStr = bfX.toString() + ' ' + bfY.toString(); //base frequency string
      feTurb.setAttribute('baseFrequency', bfStr);
    }
  }), 0
);

编译

CSS

body,
html {
    height: 100%;
}
body {
    padding: 20px 0;
    background: -webkit-linear-gradient(top, #000519 0%, #050f2d 70%, #000519 100%);
    background: linear-gradient(to bottom, #000519 0%, #050f2d 70%, #000519 100%);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(1600px);
    transform: perspective(1600px);
}
.poster {
    width: 337px;
    height: 500px;
    position: absolute;
    background: black;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -160px;
    border-radius: 3px;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.poster div[class*="layer-"] {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
}
.poster .layer-s {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/tumblr_oj7kzs6uit1qeyvpto1_500.gif");
    background-size: 40% !important;
    background-position: 108px 250px !important;
}
.poster .layer-0 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/red-smoke.png");
    -webkit-filter: url("#heat");
    filter: url("#heat");
}
.poster .layer-e {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/embers.png");
    background-size: 300% 100% !important;
    background-repeat: repeat;
    background-position: initial;
    opacity: .05;
    -webkit-animation: embers 10s linear infinite;
    animation: embers 10s linear infinite;
}
.poster .layer-1 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/kylo-face.png");
}
.poster .layer-2 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/kylo-hair.png");
    -webkit-filter: url("#heat");
    filter: url("#heat");
}
.poster .layer-3 {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/luke-face.png");
}
.poster .layer-4 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/luke-hair.png");
    -webkit-filter: url("#heat");
    filter: url("#heat");
}
.poster .layer-5 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/saber.png");
    -webkit-animation: saber-glow .15s infinite;
    animation: saber-glow .15s infinite;
}
.poster .layer-6 {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/rey.png");
}
.poster::after {
    content: '';
    opacity: 1;
    position: absolute;
    top: -10;
    width: 100%;
    height: 100%;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/border.png");
    background-size: contain;
}
@-webkit-keyframes embers {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}
@keyframes embers {
    0% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}
@-webkit-keyframes saber-glow {
    0% {
        opacity: 1;
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
    50% {
        opacity: .97;
        -webkit-filter: brightness(0.97);
        filter: brightness(0.97);
    }
    65% {
        opacity: 1;
        -webkit-filter: brightness(1.1);
        filter: brightness(1.1);
    }
    80% {
        opacity: .98;
        -webkit-filter: brightness(0.95);
        filter: brightness(0.95);
    }
    85% {
        opacity: 1;
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
    }
    100% {
        opacity: 1;
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
}
@keyframes saber-glow {
    0% {
        opacity: 1;
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
    50% {
        opacity: .97;
        -webkit-filter: brightness(0.97);
        filter: brightness(0.97);
    }
    65% {
        opacity: 1;
        -webkit-filter: brightness(1.1);
        filter: brightness(1.1);
    }
    80% {
        opacity: .98;
        -webkit-filter: brightness(0.95);
        filter: brightness(0.95);
    }
    85% {
        opacity: 1;
        -webkit-filter: brightness(1.05);
        filter: brightness(1.05);
    }
    100% {
        opacity: 1;
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
}

HTML

类似激光武器的动画特效

svg, feturbulence

编辑器支持Emmet

快捷键

类似激光武器的动画特效

svg, feturbulence

HTML5 SVG深夜办公室场景特效

HTML5 SVG 滤镜特效 - 水波涟漪动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：