Pure CSS3 make a music stage effects

Brought to you today is making music scene CSS3 effects, the entire animation just a static image can achieve high force grid effect. This animation a little difficult to implement, and because of limitations of CSS, stage lighting does not work, look no imagination cool. I suggest that you make this kind animated lighting effects to make use of canvas, CSS3 bit powerless.

## front-end code

<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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

#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%);
  }
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

Knowledge extraction

1. Mobile Animation chart using CSS3 animation sets, two sets of staggered allows animation animated movement trajectory richer. At the same time, you will find that these two groups were given two animation elements to achieve, why not apply the same two sets of animation on an element of it? If you frequent contact transformshould know that one of the matrix changes the properties are often in conflict, there is no exception, so when the two groups at the same time animation used transformwhen you want to separate them.
2. Stage lighting is a production difficulty, let the light shine wearing a black mask, which is nothing special in the perfect solution in CSS3. I tried clip-pathand mask-imagehad no effect, eventually using a circular gradient to complete, but also to achieve a circular gradient halo effect, two birds with one stone.
3. In modern chrome and other browser in the background with a gradient can not be applied animation attribute (with the no effect), which leads the entire animation lights can only play in one place (the effect is very blunt force changing positions).

Overall, the effect is achieved, but not perfect, next time you can try to move canvas or svg animation solve the problem of the light.