css3实现的加载动画效果
程序员文章站
2022-03-10 21:07:39
实现效果实现代码html
- <...
实现效果
实现代码
html
<div class='peeek-loading'> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css3
.peeek-loading { background-color: #38d368; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; } .peeek-loading ul { position: absolute; left: calc(50% - 0.7em); top: calc(50% - 4.2em); display: inline-block; text-indent: 2.8em; } .peeek-loading ul li:after, .peeek-loading ul:after { width: 1.4em; height: 1.4em; background-color: #fff; border-radius: 100%; } .peeek-loading ul li:after, .peeek-loading ul:after { content: ""; display: block; } .peeek-loading ul:after { position: absolute; top: 2.8em; } .peeek-loading li { position: absolute; padding-bottom: 5.6em; top: 0; left: 0; } .peeek-loading li:nth-child(1) { transform: rotate(0deg); animation-delay: 0.125s; } .peeek-loading li:nth-child(1):after { animation-delay: 0.125s; } .peeek-loading li:nth-child(2) { transform: rotate(36deg); animation-delay: 0.25s; } .peeek-loading li:nth-child(2):after { animation-delay: 0.25s; } .peeek-loading li:nth-child(3) { transform: rotate(72deg); animation-delay: 0.375s; } .peeek-loading li:nth-child(3):after { animation-delay: 0.375s; } .peeek-loading li:nth-child(4) { transform: rotate(108deg); animation-delay: 0.5s; } .peeek-loading li:nth-child(4):after { animation-delay: 0.5s; } .peeek-loading li:nth-child(5) { transform: rotate(144deg); animation-delay: 0.625s; } .peeek-loading li:nth-child(5):after { animation-delay: 0.625s; } .peeek-loading li:nth-child(6) { transform: rotate(180deg); animation-delay: 0.75s; } .peeek-loading li:nth-child(6):after { animation-delay: 0.75s; } .peeek-loading li:nth-child(7) { transform: rotate(216deg); animation-delay: 0.875s; } .peeek-loading li:nth-child(7):after { animation-delay: 0.875s; } .peeek-loading li:nth-child(8) { transform: rotate(252deg); animation-delay: 1s; } .peeek-loading li:nth-child(8):after { animation-delay: 1s; } .peeek-loading li:nth-child(9) { transform: rotate(288deg); animation-delay: 1.125s; } .peeek-loading li:nth-child(9):after { animation-delay: 1.125s; } .peeek-loading li:nth-child(10) { transform: rotate(324deg); animation-delay: 1.25s; } .peeek-loading li:nth-child(10):after { animation-delay: 1.25s; } .peeek-loading li { animation: dotanimation 2.5s infinite; } @keyframes dotanimation { 0%, 55%, 100% { padding: 0 0 5.6em 0; } 5%, 50% { padding: 2.8em 0; } } .peeek-loading li:after { animation: dotanimationtwo 2.5s infinite; } @-webkit-keyframes dotanimationtwo { 0%, 55%, 100% { opacity: 1; transform: scale(1); } 5%, 50% { opacity: 0.5; transform: scale(0.5); } }
以上就是css3实现的加载动画效果的详细内容,更多关于css3 加载动画的资料请关注其它相关文章!
推荐阅读
-
利用CSS3 animation动画属性实现轮播图效果的方法详解
-
66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose
-
实现动画效果核心方式的js代码_javascript技巧
-
Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程
-
C#使用Shader实现夜幕降临倒计时的效果
-
微信小程序局部刷新触发整页刷新效果的实现代码
-
asp下用实现模板加载的的几种方法总结 原创
-
剪映字幕怎么让摇摆运动起来? 剪映字幕动画效果的制作方法
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose
-
HTML+CSS+JS实现堆叠轮播效果的示例代码