loading动画特效小结
话不多说,请看代码
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>lodading动画效果上</title> <linkrel="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#cccsolid; box-sizing:border-box; display:flex; align-content:center; justify-content:center; position:relative; } .box.loading{ position:absolute; top:50px; } @-webkit-keyframesloading-1{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } 100%{ transform:rotate(360deg); } } .demo-1.loading{ width:35px; height:35px; position:relative; } .demo-1.loadingi{ display:block; width:100%; height:100%; border-radius:50%; background:linear-gradient(transparent0%,transparent70%,#33330%,#333100%); -webkit-animation:loading-1.6slinear0sinfinite; } @-webkit-keyframesloading-2{ 0%{ transform:scaleY(1); } 50%{ transform:scaleY(0.4); } 100%{ transform:scaleY(1); } } .demo-2.loadingi{ display:inline-block; width:4px; height:35px; border-radius:2px; margin:02px; background-color:#333; } .demo-2.loadingi:nth-child(1){ -webkit-animation:loading-21sease-in.1sinfinite; } .demo-2.loadingi:nth-child(2){ -webkit-animation:loading-21sease-in.2sinfinite; } .demo-2.loadingi:nth-child(3){ -webkit-animation:loading-21sease-in.3sinfinite; } .demo-2.loadingi:nth-child(4){ -webkit-animation:loading-21sease-in.4sinfinite; } .demo-2.loadingi:nth-child(5){ -webkit-animation:loading-21sease-in.5sinfinite; } .demo-3.loading{ position:relative; } .demo-3.loadingi{ display:block; width:15px; height:15px; border-radius:50%; background-color:#333; position:absolute; } .demo-3.loadingi:nth-child(1){ top:25px; left:0; -webkit-animation:loading-31sease0sinfinite; } .demo-3.loadingi:nth-child(2){ top:17px; left:17px; -webkit-animation:loading-31sease-0.12sinfinite; } .demo-3.loadingi:nth-child(3){ top:0px; left:25px; -webkit-animation:loading-31sease-0.24sinfinite; } .demo-3.loadingi:nth-child(4){ top:-17px; left:17px; -webkit-animation:loading-31sease-0.36sinfinite; } .demo-3.loadingi:nth-child(5){ top:-25px; left:0; -webkit-animation:loading-31sease-0.48sinfinite; } .demo-3.loadingi:nth-child(6){ top:-17px; left:-17px; -webkit-animation:loading-31sease-0.6sinfinite; } .demo-3.loadingi:nth-child(7){ top:0px; left:-25px; -webkit-animation:loading-31sease-0.72sinfinite; } .demo-3.loadingi:nth-child(8){ top:17px; left:-17px; -webkit-animation:loading-31sease-0.84sinfinite; } @-webkit-keyframesloading-3{ 50%{ transform:scale(0.4); opacity:.3 } 100%{ transform:scale(1); opacity:1 } } @-webkit-keyframesloading-4{ 0%{ transform:scale(0); opacity:0; } 1%{ opacity:1; } 100%{ transform:scale(1); opacity:0; } } .demo-4.loadingi:nth-child(1){ -webkit-animation:loading-41slinear0sinfinite; } .demo-4.loadingi:nth-child(2){ -webkit-animation:loading-41slinear0.2sinfinite; } .demo-4.loadingi:nth-child(3){ -webkit-animation:loading-41slinear0.4sinfinite; } .demo-4.loading{ width:60px; height:60px; position:relative; } .demo-4.loadingi{ 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.loadingi{ display:block; border:2pxsolid#333; border-color:transparent#333; border-radius:50%; position:absolute; } .demo-5.loadingi:first-child{ width:35px; height:35px; top:0px; left:0px; -webkit-animation:loading-51sease-in-out0sinfinite; } .demo-5.loadingi:last-child{ width:15px; height:15px; top:10px; left:10px; -webkit-animation:loading-51sease-in-out0.5sinfinitereverse; } @-webkit-keyframesloading-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.loadingi{ display:block; width:20px; height:20px; border-radius:50%; background-color:#333; margin-right:10px; position:absolute; } @-webkit-keyframesloading-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.loadingi:nth-child(1){ -webkit-animation:loading-62slinear0sinfinite; } .demo-6.loadingi:nth-child(2){ -webkit-animation:loading-62slinear-0.4sinfinite; } .demo-6.loadingi:nth-child(3){ -webkit-animation:loading-62slinear-0.8sinfinite; } .demo-6.loadingi:nth-child(4){ -webkit-animation:loading-62slinear-1.2sinfinite; } .demo-6.loadingi:nth-child(5){ -webkit-animation:loading-62slinear-1.6sinfinite; } .demo-7.loadingi{ 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:loading1.2s0.12sinfiniteease-in-out; -moz-animation:loading1.2s0.12sinfiniteease-in-out; -ms-animation:loading1.2s0.12sinfiniteease-in-out; -o-animation:loading1.2s0.12sinfiniteease-in-out; animation:loading1.2s0.12sinfiniteease-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:loading1.2s0.24sinfiniteease-in-out; -moz-animation:loading1.2s0.24sinfiniteease-in-out; -ms-animation:loading1.2s0.24sinfiniteease-in-out; -o-animation:loading1.2s0.24sinfiniteease-in-out; animation:loading1.2s0.24sinfiniteease-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:loading1.2s0.36sinfiniteease-in-out; -moz-animation:loading1.2s0.36sinfiniteease-in-out; -ms-animation:loading1.2s0.36sinfiniteease-in-out; -o-animation:loading1.2s0.36sinfiniteease-in-out; animation:loading1.2s0.36sinfiniteease-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:loading1.2s0.48sinfiniteease-in-out; -moz-animation:loading1.2s0.48sinfiniteease-in-out; -ms-animation:loading1.2s0.48sinfiniteease-in-out; -o-animation:loading1.2s0.48sinfiniteease-in-out; animation:loading1.2s0.48sinfiniteease-in-out; } .demo-7.loading-5{ top:-20px; left:0; -webkit-animation:loading1.2s0.6sinfiniteease-in-out; -moz-animation:loading1.2s0.6sinfiniteease-in-out; -ms-animation:loading1.2s0.6sinfiniteease-in-out; -o-animation:loading1.2s0.6sinfiniteease-in-out; animation:loading1.2s0.6sinfiniteease-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:loading1.2s0.72sinfiniteease-in-out; -moz-animation:loading1.2s0.72sinfiniteease-in-out; -ms-animation:loading1.2s0.72sinfiniteease-in-out; -o-animation:loading1.2s0.72sinfiniteease-in-out; animation:loading1.2s0.72sinfiniteease-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:loading1.2s0.84sinfiniteease-in-out; -moz-animation:loading1.2s0.84sinfiniteease-in-out; -ms-animation:loading1.2s0.84sinfiniteease-in-out; -o-animation:loading1.2s0.84sinfiniteease-in-out; animation:loading1.2s0.84sinfiniteease-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:loading1.2s0.96sinfiniteease-in-out; -moz-animation:loading1.2s0.96sinfiniteease-in-out; -ms-animation:loading1.2s0.96sinfiniteease-in-out; -o-animation:loading1.2s0.96sinfiniteease-in-out; animation:loading1.2s0.96sinfiniteease-in-out; } @-webkit-keyframesloading{ 50%{ opacity:0.3; } 100%{ opacity:1; } } @-moz-keyframesloading{ 50%{ opacity:0.3; } 100%{ opacity:1; } } @-ms-keyframesloading{ 50%{ opacity:0.3; } 100%{ opacity:1; } } @-o-keyframesloading{ 50%{ opacity:0.3; } 100%{ opacity:1; } } @keyframesloading{ 50%{ opacity:0.3; } 100%{ opacity:1; } } </style> </head> <body> <divclass="box"> <divclass="loaderdemo-1"> <divclass="loading"> <i></i> </div> </div> <divclass="loaderdemo-2"> <divclass="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <divclass="loaderdemo-3"> <divclass="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <divclass="loaderdemo-4"> <divclass="loading"> <i></i> <i></i> <i></i> </div> </div> <divclass="loaderdemo-5"> <divclass="loading"> <i></i> <i></i> </div> </div> <divclass="loaderdemo-6"> <divclass="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <divclass="loaderdemo-7"> <divclass="loading"> <iclass="loading-1"></i> <iclass="loading-2"></i> <iclass="loading-3"></i> <iclass="loading-4"></i> <iclass="loading-5"></i> <iclass="loading-6"></i> <iclass="loading-7"></i> <iclass="loading-8"></i> </div> </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!