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

 

　　前端代码

 

　　<div id="effect-background">

 

　　<div class="bg">

 

　　<img src="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%);

 

　　}

 

　　}

 

　　知识点提炼

 

　　动画大图的移动使用了两组CSS3动画，两组动画错开可以让动画移动轨迹更加丰富。同时，你会发现这两组动画分别赋予了两个元素去实现，那为什么不在同一个元素上应用两组动画呢？如果你经常接触transform应该知道，其中的矩阵变化属性经常会发生冲突，这里也不例外，所以当两组动画同时用到transform时，要将他们分开。

 

　　舞台的灯光效果是一个制作难点，要让灯光照穿黑色遮罩，这在CSS3中没有什么特别完美的解决方案。尝试了clip-path和mask-image都没有效果，最终还是使用了圆形渐变去完成，圆形渐变还能实现光晕效果，一石二鸟。

 

　　在chrome等现代浏览器中，带渐变的背景无法应用animation属性（用了也没效果），这导致整个动画的灯光只能打在一个地方（强行变换位置效果很生硬）。

 

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