CSS3实现加载效果

最新推荐文章于 2024-08-20 02:18:10 发布

十木禾

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量1k

点赞数

文章标签： CSS3 动画

本文链接：https://blog.csdn.net/zjq_1314520/article/details/79583539

版权

预期实现的效果如下如所示
加载效果

首先基本的Html布局如下

  <div id="wrap" >
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
    <div class="line5"></div>
  </div>

对于的CSS代码如下
首先设置一下基本的样式

#wrap {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 150px auto;
}
#wrap div {
    width: 8px;
    height: 50px;
    background-color: pink;
    float: left;
    margin-left: 1px;
    border-radius: 10%;
}

完成上面的CSS样式定义后，页面上就会有五个排列整齐的小细条了。

然后我们来添加动画效果
在#wrap div 加入如下代码

-webkit-animation: fadeOut 1s infinite ease-in-out;

fadeOut的代码如下

@-webkit-keyframes fadeOut {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}

这个时候页面上的小细条都在整齐的动起来了

那么现在就是使用animation-delay来设置动画的触发时间，实现原先的效果

#wrap .line1 {
  -webkit-animation-delay: -0.9s;
}
#wrap .line2 {
  -webkit-animation-delay: -0.8s;
}
#wrap .line3 {
  -webkit-animation-delay: -0.7s;
}
#wrap .line4 {
  -webkit-animation-delay: -0.8s;
}
#wrap .line5 {
  -webkit-animation-delay: -0.9s;
}

以上就实现了刚开始图中的效果。