loading动画特效小结

话不多说，请看代码

 
 
 
 
 .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;
 }
 } 
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！