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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
赞 (0)