css线性炫酷动画

需求

线条以动画的形式显示，线条显示结束后图片淡出

思路

给图片一个透明遮罩层，遮罩层遮挡住线条，让遮罩层的宽度从100%到0。图片的淡出动画要设置animatio-delay，时间为线条动画的运动时间，这样就形成了动画队列

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box {
    position: relative;
  }
  .model,
  .line {
    position: absolute;
    left: 200px;
  }
  .model {
    display: inline-block;
    width: 206px;
    height: 30px;
    background: #fff;
    animation: 1s translate linear;
     animation-fill-mode: both;
  }
  .girl {
    display: inline-block;
    animation: .5s opacity linear;
    /*第一个动画运动后开始第二个动画*/
    animation-delay: 1s;
    /*运动前保持第一帧状态，运动后保持最后一帧状态*/
    animation-fill-mode: both;


  }
  @keyframes translate {
    0% {
      width: 206px;
    }
    100% {
      width: 0;
    }
  }
  @keyframes opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  </style>
</head>

<body>

  
  <div class="box">
    <div class="girl">
      <img src="./imgs/test.png" alt="">
    </div>
    <img src="./imgs/line.jpg" alt="" width="206" height="11" class="line">
    <span class="model"></span>
  </div>
</body>

</html>

静态效果图

posted @ 2018-02-07 18:31  wmui  阅读(408)  评论(0)    收藏  举报