首页 / CSS / CSS的loading动画效果使用教程
CSS的loading动画效果使用教程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS的loading动画效果使用教程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5396字,纯文字阅读大概需要8分钟。
内容图文
这次给大家带来CSS的loading动画效果使用教程,CSS的loading动画效果使用注意事项有哪些,下面就是实战案例,一起来看一下。本文介绍了一份纯CSS loading效果代码示例,分享给大家,具体如下:
预览
代码
使用了CSS的keyframes自定义关键帧动画
<!DOCTYPE html> <html lang="en"> <head> <title>Loading</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p#preload { margin: auto; position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 9999999 } p#preload>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%) } p#preload .cssload-loader { position: absolute; left: 0; right: 0; margin: auto; width: 62px; height: 62px; top: 50%; margin-top: -31px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; perspective: 780px } p#preload .cssload-inner { position: absolute; width: 100%; height: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } p#preload .cssload-inner.cssload-one { left: 0; top: 0; animation: cssload-rotate-one 1.15s linear infinite; -o-animation: cssload-rotate-one 1.15s linear infinite; -ms-animation: cssload-rotate-one 1.15s linear infinite; -webkit-animation: cssload-rotate-one 1.15s linear infinite; -moz-animation: cssload-rotate-one 1.15s linear infinite; border-bottom: 3px solid #000 } p#preload .cssload-inner.cssload-two { right: 0; top: 0; animation: cssload-rotate-two 1.15s linear infinite; -o-animation: cssload-rotate-two 1.15s linear infinite; -ms-animation: cssload-rotate-two 1.15s linear infinite; -webkit-animation: cssload-rotate-two 1.15s linear infinite; -moz-animation: cssload-rotate-two 1.15s linear infinite; border-right: 3px solid #000 } p#preload .cssload-inner.cssload-three { right: 0; bottom: 0; animation: cssload-rotate-three 1.15s linear infinite; -o-animation: cssload-rotate-three 1.15s linear infinite; -ms-animation: cssload-rotate-three 1.15s linear infinite; -webkit-animation: cssload-rotate-three 1.15s linear infinite; -moz-animation: cssload-rotate-three 1.15s linear infinite; border-top: 3px solid #000 } @keyframes cssload-rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-one { 0% { -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-one { 0% { -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-one { 0% { -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @keyframes cssload-rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-two { 0% { -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-two { 0% { -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-two { 0% { -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @keyframes cssload-rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-o-keyframes cssload-rotate-three { 0% { -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-ms-keyframes cssload-rotate-three { 0% { -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-webkit-keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } @-moz-keyframes cssload-rotate-three { 0% { -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } </style> </head> <body> <p id="preload"> <p class="cssload-loader"> <p class="cssload-inner cssload-one"></p> <p class="cssload-inner cssload-two"></p> <p class="cssload-inner cssload-three"></p> </p> </p> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
CSS3的linear-gradient线性渐变使用方法
CSS的mask-image属性详解
以上就是CSS的loading动画效果使用教程的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS的loading动画效果使用教程全部内容,希望文章能够帮你解决CSS的loading动画效果使用教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。