如何使用纯CSS3实现页面loading加载动画效果
如何使用纯CSS3实现页面loading加载动画效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、株洲ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的株洲网站制作公司
制作页面loading 加载动画需要用到很多CSS3中的属性,比如:animation动画,display,transform属性等等,如有不清楚的小伙伴可以看看我以前的文章,之前都有介绍过,或者访问 CSS3视频教程 。
实例示范:制作一个柱状动画加载效果,条纹由长变短再变长,具体代码如下:
HTML部分:
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实现页面loading加载动画效果
本文URL:http://scyanting.com/article/jsjhog.html