纯CSS3制作音乐舞台特效

今天给大家带来的是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%);
  }
}

知识点提炼

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

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

(全文完)

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章