C3----几个常用的加载图标制作
1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html { background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply; height: 100%; } .spinner { margin: 100px auto; width: 100px; height: 100px; position: relative; } .container1>div, .container2>div, .container3>div { width: 20px; height: 20px; background-color: #333; border-radius: 100%; position: absolute; /* -webkit-animation: bouncedelay 1.2s infinite ease-in-out; */ /* animation: bouncedelay 1.2s infinite ease-in-out; */ /* -webkit-animation-fill-mode: both; animation-fill-mode: both; */ } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style> </head> <body> <div class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> </body> </html>
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0 } body, html { background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%); height: 100%; } .baby { width: 100px; height: 100px; position: relative; border-radius: 50%; margin: 50px auto; } .b1, .b2{ background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: move 2s infinite ease-in-out; opacity: .4; } .baby .b2{ animation-delay: -1s; } @keyframes move { 0%, 100% { transform: scale(0.0); } 50% { transform: scale(1.0); } } </style> </head> <body> <div class="baby"> <div class="b1"> </div> <div class="b2"> </div> </div> </body> </html>
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { margin: 20px auto; height: 100px; width: 100px; } span { display: inline-block; width: 5px; height: 50px; background-color: blue; transition: all 2s; background-origin: center center; animation: move 1.2s infinite ease-in-out; /* animation: move 5s 0s linear infinite; */ } span:nth-child(1) { animation-delay: -1.4s } span:nth-child(2) { animation-delay: -1.0s; } span:nth-child(3) { animation-delay: -0.9s; } span:nth-child(4) { animation-delay: -0.8s; } span:nth-child(5) { animation-delay: -0.6s; } @keyframes move { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } </style> </head> <body> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
4.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0px; } body, html { background: #000 } div { margin: 50px auto; width: 70px; height: 70px; background: gold; animation: move 1.2s 0s infinite ease-in-out; transform-style: preserve-3d; /* border-radius: 50% */ } @keyframes move { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } </style> </head> <body> <div> </div> <div></div> <div></div> <div></div> <div></div> </body> </html>