loading动画特效小结
更新时间:2017年01月22日 15:57:43 作者:756642763
本篇文章主要分享了javascript实现loading动画特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
话不多说,请看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lodading动画效果上</title> <link rel="stylesheet" href="style.css"/> <style> .box{ width: 100%; padding:3%; box-sizing: border-box; overflow: hidden; } .box .loader{ width: 30%; float: left; height: 200px; margin-right: 3%; border:1px #ccc solid; box-sizing: border-box; display: flex; align-content: center; justify-content: center; position: relative; } .box .loading { position: absolute; top: 50px; } @-webkit-keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } .demo-1 .loading{ width: 35px; height: 35px; position: relative; } .demo-1 .loading i{ display: block; width: 100%; height: 100%; border-radius:50%; background: linear-gradient(transparent 0%, transparent 70%, #333 30% ,#333 100%); -webkit-animation: loading-1 .6s linear 0s infinite; } @-webkit-keyframes loading-2{ 0%{ transform: scaleY(1); } 50%{ transform: scaleY(0.4); } 100%{ transform: scaleY(1); } } .demo-2 .loading i{ display: inline-block; width: 4px; height: 35px; border-radius: 2px; margin:0 2px; background-color: #333; } .demo-2 .loading i:nth-child(1){ -webkit-animation:loading-2 1s ease-in .1s infinite; } .demo-2 .loading i:nth-child(2){ -webkit-animation:loading-2 1s ease-in .2s infinite; } .demo-2 .loading i:nth-child(3){ -webkit-animation:loading-2 1s ease-in .3s infinite; } .demo-2 .loading i:nth-child(4){ -webkit-animation:loading-2 1s ease-in .4s infinite; } .demo-2 .loading i:nth-child(5){ -webkit-animation:loading-2 1s ease-in .5s infinite; } .demo-3 .loading{ position: relative; } .demo-3 .loading i{ display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #333; position: absolute; } .demo-3 .loading i:nth-child(1){ top: 25px; left: 0; -webkit-animation:loading-3 1s ease 0s infinite; } .demo-3 .loading i:nth-child(2){ top: 17px; left: 17px; -webkit-animation:loading-3 1s ease -0.12s infinite; } .demo-3 .loading i:nth-child(3){ top: 0px; left: 25px; -webkit-animation:loading-3 1s ease -0.24s infinite; } .demo-3 .loading i:nth-child(4){ top: -17px; left: 17px; -webkit-animation:loading-3 1s ease -0.36s infinite; } .demo-3 .loading i:nth-child(5){ top: -25px; left: 0; -webkit-animation:loading-3 1s ease -0.48s infinite; } .demo-3 .loading i:nth-child(6){ top: -17px; left: -17px; -webkit-animation:loading-3 1s ease -0.6s infinite; } .demo-3 .loading i:nth-child(7){ top: 0px; left: -25px; -webkit-animation:loading-3 1s ease -0.72s infinite; } .demo-3 .loading i:nth-child(8){ top: 17px; left: -17px; -webkit-animation:loading-3 1s ease -0.84s infinite; } @-webkit-keyframes loading-3{ 50%{ transform: scale(0.4); opacity: .3 } 100%{ transform: scale(1); opacity: 1 } } @-webkit-keyframes loading-4{ 0%{ transform: scale(0); opacity: 0; } 1%{ opacity: 1; } 100%{ transform: scale(1); opacity: 0; } } .demo-4 .loading i:nth-child(1){ -webkit-animation:loading-4 1s linear 0s infinite; } .demo-4 .loading i:nth-child(2){ -webkit-animation:loading-4 1s linear 0.2s infinite; } .demo-4 .loading i:nth-child(3){ -webkit-animation:loading-4 1s linear 0.4s infinite; } .demo-4 .loading{ width: 60px; height: 60px; position: relative; } .demo-4 .loading i{ display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 0; opacity: 0; } .demo-5 .loading{ width: 40px; height: 40px; position: relative; } .demo-5 .loading i{ display: block; border:2px solid #333; border-color: transparent #333; border-radius: 50%; position: absolute; } .demo-5 .loading i:first-child{ width: 35px; height: 35px; top:0px; left: 0px; -webkit-animation:loading-5 1s ease-in-out 0s infinite; } .demo-5 .loading i:last-child{ width: 15px; height: 15px; top:10px; left: 10px; -webkit-animation:loading-5 1s ease-in-out 0.5s infinite reverse; } @-webkit-keyframes loading-5{ 0%{ transform: rotate(0deg) scale(1); } 50%{ transform: rotate(180deg) scale(0.6); } 100%{ transform: rotate(360deg) scale(1); } } .demo-6 .loading{ width: 80px; height: 20px; position: relative; } .demo-6 .loading i{ display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin-right: 10px; position: absolute; } @-webkit-keyframes loading-6{ 0%{ left: 100px; top: 0; } 80%{ left: 0; top: 0; } 85%{ left: 0; top: -20px; width: 20px; height: 20px; } 90%{ width: 40px; height: 20px; } 95%{ left: 100px; top: -20px; width: 20px; height: 20px; } 100%{ left: 100px; top: 0; } } .demo-6 .loading i:nth-child(1){ -webkit-animation:loading-6 2s linear 0s infinite; } .demo-6 .loading i:nth-child(2){ -webkit-animation:loading-6 2s linear -0.4s infinite; } .demo-6 .loading i:nth-child(3){ -webkit-animation:loading-6 2s linear -0.8s infinite; } .demo-6 .loading i:nth-child(4){ -webkit-animation:loading-6 2s linear -1.2s infinite; } .demo-6 .loading i:nth-child(5){ -webkit-animation:loading-6 2s linear -1.6s infinite; } .demo-7 .loading i { background-color: #777; border-radius: 2px; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 5px; height: 15px; } .demo-7 .loading-1 { top: 20px; left: 0; -webkit-animation: loading 1.2s 0.12s infinite ease-in-out; -moz-animation: loading 1.2s 0.12s infinite ease-in-out; -ms-animation: loading 1.2s 0.12s infinite ease-in-out; -o-animation: loading 1.2s 0.12s infinite ease-in-out; animation: loading 1.2s 0.12s infinite ease-in-out; } .demo-7 .loading-2 { top: 13.63636px; left: 13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.24s infinite ease-in-out; -moz-animation: loading 1.2s 0.24s infinite ease-in-out; -ms-animation: loading 1.2s 0.24s infinite ease-in-out; -o-animation: loading 1.2s 0.24s infinite ease-in-out; animation: loading 1.2s 0.24s infinite ease-in-out; } .demo-7 .loading-3 { top: 0; left: 20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.36s infinite ease-in-out; -moz-animation: loading 1.2s 0.36s infinite ease-in-out; -ms-animation: loading 1.2s 0.36s infinite ease-in-out; -o-animation: loading 1.2s 0.36s infinite ease-in-out; animation: loading 1.2s 0.36s infinite ease-in-out; } .demo-7 .loading-4 { top: -13.63636px; left: 13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.48s infinite ease-in-out; -moz-animation: loading 1.2s 0.48s infinite ease-in-out; -ms-animation: loading 1.2s 0.48s infinite ease-in-out; -o-animation: loading 1.2s 0.48s infinite ease-in-out; animation: loading 1.2s 0.48s infinite ease-in-out; } .demo-7 .loading-5 { top: -20px; left: 0; -webkit-animation: loading 1.2s 0.6s infinite ease-in-out; -moz-animation: loading 1.2s 0.6s infinite ease-in-out; -ms-animation: loading 1.2s 0.6s infinite ease-in-out; -o-animation: loading 1.2s 0.6s infinite ease-in-out; animation: loading 1.2s 0.6s infinite ease-in-out; } .demo-7 .loading-6 { top: -13.63636px; left: -13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.72s infinite ease-in-out; -moz-animation: loading 1.2s 0.72s infinite ease-in-out; -ms-animation: loading 1.2s 0.72s infinite ease-in-out; -o-animation: loading 1.2s 0.72s infinite ease-in-out; animation: loading 1.2s 0.72s infinite ease-in-out; } .demo-7 .loading-7 { top: 0; left: -20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.84s infinite ease-in-out; -moz-animation: loading 1.2s 0.84s infinite ease-in-out; -ms-animation: loading 1.2s 0.84s infinite ease-in-out; -o-animation: loading 1.2s 0.84s infinite ease-in-out; animation: loading 1.2s 0.84s infinite ease-in-out; } .demo-7 .loading-8 { top: 13.63636px; left: -13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.96s infinite ease-in-out; -moz-animation: loading 1.2s 0.96s infinite ease-in-out; -ms-animation: loading 1.2s 0.96s infinite ease-in-out; -o-animation: loading 1.2s 0.96s infinite ease-in-out; animation: loading 1.2s 0.96s infinite ease-in-out; } @-webkit-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-moz-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-ms-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-o-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } </style> </head> <body> <div class="box"> <div class="loader demo-1"> <div class="loading"> <i></i> </div> </div> <div class="loader demo-2"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-3"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-4"> <div class="loading"> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-5"> <div class="loading"> <i></i> <i></i> </div> </div> <div class="loader demo-6"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-7"> <div class="loading"> <i class="loading-1"></i> <i class="loading-2"></i> <i class="loading-3"></i> <i class="loading-4"></i> <i class="loading-5"></i> <i class="loading-6"></i> <i class="loading-7"></i> <i class="loading-8"></i> </div> </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
js中将HTMLCollection/NodeList/伪数组转换成数组的代码,需要的朋友可以参考下。2011-07-07Javascript中的for in循环和hasOwnProperty结合使用
当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误2013-06-06js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
这篇文章主要为大家详细介绍了两种js+css实现的圆角边框TAB选项卡滑动门效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下2015-08-08JavaScript读二进制文件并用ajax传输二进制流的方法
这篇文章主要介绍了JavaScript读二进制文件并用ajax传输二进制流的方法的相关资料,需要的朋友可以参考下2016-07-07JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
DIV层最小化和随意拖拽排序,很多的爱好者都想实现这个功能,小编整理搜集了一下,希望本文的知识点可以帮助到你2013-02-02
最新评论