123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
<!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>脉动 loading</title> <style> body{ margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(#eee 70%, pink); } .loader{ width: 6em; height: 6em; padding: 3em; font-size: 10px; background-color: pink; border-radius: 50%; border: 0.8em solid hotpink; display: flex; align-items: center; justify-content: space-between; animation: loader-animate 1.5s infinite ease-in-out; } .loader > span{ width: .5em; height: 50%; background-color: deeppink; transform: scaleY(.05) translateX(-.5em); animation: span-animate 1.5s infinite ease-in-out; animation-delay: calc(var(--n) * .05s ); } .loader > span:nth-child(1) { --n: 1; } .loader > span:nth-child(2) { --n: 2; } .loader > span:nth-child(3) { --n: 3; } .loader > span:nth-child(4) { --n: 4; } .loader > span:nth-child(5) { --n: 5; } .loader > span:nth-child(6) { --n: 6; } .loader > span:nth-child(7) { --n: 7; } .loader > span:nth-child(8) { --n: 8; } .loader > span:nth-child(9) { --n: 9; } .loader > span:nth-child(10) { --n: 10; } @keyframes loader-animate{ 45%,55%{ transform: scale(1.05); } } @keyframes span-animate { 0%,100%{ transform: scaleY(.05) translateX(-.5em); } 15%{ transform: scaleY(1.2) translateX(1em); } 90%,100%{ background-color: hotpink; } } </style></head><body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div></body></html>
参考文章打开