纯CSS3实现页面loading加载动画效果(附代码)
程序员文章站
2022-04-23 11:23:00
...
打开页面时,经常会遇到页面正在loading(加载)的情况,作为一个前端开发人员,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个即炫酷又实用的CSS3 loading加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看。
制作页面loading 加载动画需要用到很多CSS3中的属性,比如:animation动画,display,transform属性等等,如有不清楚的小伙伴可以看看我以前的文章,之前都有介绍过,或者访问 CSS3视频教程 。
实例示范:制作一个柱状动画加载效果,条纹由长变短再变长,具体代码如下:
HTML部分:
<div class="box"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> <div class="r5"></div> </div>
CSS部分:
.box { margin: 100px auto; width: 50px; height: 60px; } .box>div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .box .r2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .box .r3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .box .r4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .box .r5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
效果如图所示:
以上分享了CSS3实现页面loading加载动画效果的代码,项目中用的比较多,可以直接拿过去使用,也希望大家可以自己动手尝试,看看自己能不能写出其他的效果,希望这篇文章对你有所帮助!更多相关教程请访问 CSS3在线手册
以上就是纯CSS3实现页面loading加载动画效果(附代码)的详细内容,更多请关注其它相关文章!
推荐阅读
-
使用css3实现超炫的loading加载动画效果
-
纯CSS3实现的8种Loading动画效果
-
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
-
使用CSS3实现超炫的Loading(加载)动画效果_html/css_WEB-ITnose
-
使用CSS3实现超炫的Loading(加载)动画效果_html/css_WEB-ITnose
-
使用css3实现超炫的loading加载动画效果
-
利用纯css3实现圆形从中心向四周扩散动画效果代码
-
纯CSS3实现页面loading加载动画效果(附代码)
-
纯CSS3实现的8种Loading动画效果
-
HTML+CSS实现页面加载(loading)动画效果