【CSS小例】闪电动画

实现效果

绿藻头闪电动画

准备

既然要实现酷炫的闪电动画，我们先打好酷炫的基础，搞一张绿藻头的素材先。

用PS制作一张遮罩图片

创建一个图层，填充白色，设置透明度：

使用橡皮擦或其他工具涂抹出任务主体部分：

我们得到了一张这样的素材：（这里是截图，为了看得清楚）

另外，在准备两个闪电素材。

万事俱备，接下来用CSS实现闪电效果动画，让绿藻头更酷炫。

代码实现

Html

    <div class="flash-box">
      <span class="flash1"></span>
      <span class="flash2"></span>
      <div class="mask"></div>
    </div>

Css

图片放在外层元素背景里：

    .flash-box{
      width: 320px;
      height: 600px;
      position: relative;
      background: url(./Sauron.jpg);
      background-size: 100% 100%;
    }

设置遮罩层覆盖在图片之上，并添加动画：

    .mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url(./mask.png);
      background-size: 100% 100%;
      animation: mask 5s linear infinite;
    }
    @keyframes mask {
      0%{ opacity: 0; }
      3%{ opacity: 1; }
      10%{ opacity: 0; }
      15%{ opacity: 0; }
      17%{ opacity: 1; }
      20%{ opacity: 0; }
      22%{ opacity: 1; }
      25%{ opacity: 0; }
      100%{ opacity: 0; }
    }

设置两个闪电元素的动画：

注意，两个闪电元素的动画是以遮罩层动画的时间节点为基础的。

    .flash1{
      width: 176px;
      height: 245px;
      position: absolute;
      top: 0;
      left: 0;
      background: url(./flash1.png);
      background-size: 100% 100%;
      animation: flash1 5s linear infinite;
    }
    @keyframes flash1 {
      0%{ opacity: 0; }
      3%{ opacity: 1; }
      10%{ opacity: 0; }
      20%{ opacity: 0; }
      22%{ opacity: 1; }
      25%{ opacity: 0; }
      100%{ opacity: 0; }
    }
    .flash2{
      width: 130px;
      height: 185px;
      position: absolute;
      top: 0;
      right: 0;
      background: url(./flash2.png);
      background-size: 100% 100%;
      animation: flash2 5s linear infinite;
    }
    @keyframes flash2 {
      0%{ opacity: 0; }
      15%{ opacity: 0; }
      17%{ opacity: 1; }
      20%{ opacity: 0; }
      22%{ opacity: 1; }
      25%{ opacity: 0; }
      100%{ opacity: 0; }
    }

带有一些些小巧思的小动画就完成啦~

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。