web前端入门到实战：纯CSS3制作音乐舞台特效

今天给大家带来的是CSS3制作的音乐舞台特效，整个动画仅需一张静态图片即可实现高逼格的效果。这个动画效果实现起来有一点点难度，同时由于CSS的限制，舞台灯光效果没有起作用，看上去没有想象中酷炫。建议大家制作这种灯光效果的动画，尽量使用canvas，CSS3有点力不从心。

##前端代码

<div id="effect-background">
    <div class="bg">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.zhangyangjun.com/1824bd71-46a2-4d05-9800-6127cb6ad070.jpg"/>
    </div>
    <div class="mask"></div>
</div>

#effect-background {
  position: relative;
  margin: auto;
  margin-top: 40px;
  width: 450px;
  height: 300px;
  overflow: hidden;
}

#effect-background > .bg {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  margin: auto;
  width: 1200px;
  animation: moveX 20s linear 0s infinite alternate;
  -webkit-animation: moveX 20s linear 0s infinite alternate;
}

#effect-background > .bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation: moveY 10s linear 2s infinite alternate;
  -webkit-animation: moveY 10s linear 2s infinite alternate;
}

#effect-background > .mask {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: radial-gradient(
      circle at 200px 120px,
      transparent 18%,
      rgba(0, 0, 0, 0.6) 26%
    )
    no-repeat;
  background-size: 100% 100%;
}

@keyframes moveX {
  from {
    left: 0;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  to {
    left: 450px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}

@keyframes moveY {
  from {
    top: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  to {
    top: 300px;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
  }
}

学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

知识点提炼

1. 动画大图的移动使用了两组CSS3动画，两组动画错开可以让动画移动轨迹更加丰富。同时，你会发现这两组动画分别赋予了两个元素去实现，那为什么不在同一个元素上应用两组动画呢？如果你经常接触transform应该知道，其中的矩阵变化属性经常会发生冲突，这里也不例外，所以当两组动画同时用到transform时，要将他们分开。
2. 舞台的灯光效果是一个制作难点，要让灯光照穿黑色遮罩，这在CSS3中没有什么特别完美的解决方案。尝试了clip-path和mask-image都没有效果，最终还是使用了圆形渐变去完成，圆形渐变还能实现光晕效果，一石二鸟。
3. 在chrome等现代浏览器中，带渐变的背景无法应用animation属性（用了也没效果），这导致整个动画的灯光只能打在一个地方（强行变换位置效果很生硬）。

总的来说，效果是实现了，但还不够完美，下次可以尝试canvas或svg动画解决灯光的移动问题。