纯CSS实现预加载动画效果
发布时间:2017-09-06 11:46:23 作者:佚名 我要评论
本文给大家分享一段简单的代码实现css预加载动画效果,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
效果图
下载地址:http://xiazai.jb51.net/201709/yuanma/css_loading_jb51.rar
<style> #loading { position:absolute; left:0; top:0; width:100%; height:100%; background: #121220; overflow:hidden; z-index:9999; } /*加载圈*/ .spinner { margin:0 auto; width:60px; height:60px; position:relative; top:40%; } .container1 > div,.container2 > div,.container3 > div { width:15px; height:15px; background-color:#fff; border-radius:100%; position:absolute; -webkit-animation:bouncedelay 1.2s infinite ease-in-out; animation:bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .spinner .spinner-container { position:absolute; width:100%; height:100%; } .container2 { -webkit-transform:rotateZ(45deg); transform:rotateZ(45deg); } .container3 { -webkit-transform:rotateZ(90deg); transform:rotateZ(90deg); } .circle1 { top:0; left:0; } .circle2 { top:0; right:0; } .circle3 { right:0; bottom:0; } .circle4 { left:0; bottom:0; } .container2 .circle1 { -webkit-animation-delay:-1.1s; animation-delay:-1.1s; } .container3 .circle1 { -webkit-animation-delay:-1.0s; animation-delay:-1.0s; } .container1 .circle2 { -webkit-animation-delay:-0.9s; animation-delay:-0.9s; } .container2 .circle2 { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; } .container3 .circle2 { -webkit-animation-delay:-0.7s; animation-delay:-0.7s; } .container1 .circle3 { -webkit-animation-delay:-0.6s; animation-delay:-0.6s; } .container2 .circle3 { -webkit-animation-delay:-0.5s; animation-delay:-0.5s; } .container3 .circle3 { -webkit-animation-delay:-0.4s; animation-delay:-0.4s; } .container1 .circle4 { -webkit-animation-delay:-0.3s; animation-delay:-0.3s; } .container2 .circle4 { -webkit-animation-delay:-0.2s; animation-delay:-0.2s; } .container3 .circle4 { -webkit-animation-delay:-0.1s; animation-delay:-0.1s; } @-webkit-keyframes bouncedelay { 0%,80%,100% { -webkit-transform:scale(0.0) } 40% { -webkit-transform:scale(1.0) } } @keyframes bouncedelay { 0%,80%,100% { transform:scale(0.0); -webkit-transform:scale(0.0); } 40% { transform:scale(1.0); -webkit-transform:scale(1.0); } } </style> <body> <div id="loading" > <div class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> </div> </body>
总结
以上所述是小编给大家介绍的纯CSS实现预加载动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 本代码是一组效果非常炫酷的CSS3页面预加载loading动画特效源码,当点击页面的任何一个地方时,loading动画就会被隐藏2017-05-24
- 这是一组使用纯CSS3制作的预加载动画特效代码。共有3种动画效果,分别是翻书效果,摇晃动画和旋转动画,需要的可以下载试试2017-03-07
- CSS3 Loading预加载动画特效源码是一款使用before和after伪元素,以及CSS帧动画来完成各种不同的预加载指示器动画,感兴趣的朋友可以直接下载源码哦2016-06-30
- Web前端图片加载的方式多种多样,其所产生的HTTP请求也各异,这里我们就来列举CSS控制前端图片HTTP请求的各种情况示例,需要的朋友可以参考下2016-06-16
- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片,需要的朋友可以了解下2012-12-19
- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。2009-10-28
最新评论