css加载动画...
1 加载动画... 2 3 4 5 <p>加载动画...</p> 6 <p> </p> 7 <p> </p> 8 <style><!-- 9 .container { 10 position: absolute; 11 top: 0; 12 left: 0; 13 bottom: 0; 14 right: 0; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 } 19 20 /* Loading CSS 样式 */ 21 22 .boxLoading { 23 width: 50px; 24 height: 50px; 25 margin: auto; 26 position: absolute; 27 left: 0; 28 right: 0; 29 top: 0; 30 bottom: 0; 31 } 32 33 .boxLoading:before { 34 content: ''; 35 width: 50px; 36 height: 5px; 37 background: #000; 38 opacity: 0.1; 39 position: absolute; 40 top: 59px; 41 left: 0; 42 border-radius: 50%; 43 animation: box-loading-shadow 0.5s linear infinite; 44 } 45 .boxLoading:after { 46 content: ''; 47 width: 50px; 48 height: 50px; 49 background: -webkit-linear-gradient(270deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%); 50 background: -moz-linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%); 51 background: linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%); 52 animation: box-loading-animate 0.5s linear infinite; 53 position: absolute; 54 top: 0; 55 left: 0; 56 border-radius: 3px; 57 } 58 59 @keyframes box-loading-animate { 60 17% { 61 border-bottom-right-radius: 3px; 62 } 63 25% { 64 transform: translateY(9px) rotate(22.5deg); 65 } 66 50% { 67 transform: translateY(18px) scale(1, .9) rotate(45deg); 68 border-bottom-right-radius: 40px; 69 } 70 75% { 71 transform: translateY(9px) rotate(67.5deg); 72 } 73 100% { 74 transform: translateY(0) rotate(90deg); 75 } 76 } 77 78 @keyframes box-loading-shadow { 79 0%, 100% { 80 transform: scale(1, 1); 81 } 82 50% { 83 transform: scale(1.2, 1); 84 } 85 } 86 --></style> 87 <div class="container"><!-- Loading HTML--> 88 <div class="boxLoading"> </div> 89 </div> 90