代码来自头条号"前端小智", 侵权删
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .loader{ position: relative; } span{ position: absolute; width: 40px; height: 40px; display: block; animation: animate 4s linear calc(-0.5s*var(--i)) infinite; /* 这个计算我始终没搞懂 搞懂了在补充吧*/ background-color: #0f0; box-shadow: 0 0 10px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 120px #0f0, 0 0 160px #0f0; transform-origin: bottom; } @keyframes animate { 0%{ top: 0; left: 150px; transform: scaleY(1); filter: hue-rotate(0deg);/*给图像利用色相旋转 "angle"一值设定图像会被调整的色环角度值 也不晓得色环是哪个*/ } 2%{ top: 0; left: 150px; transform: scaleY(0.5); /*这块是做出了弹性成果*/ } 10%{ top: 0; left: 80px; transform: scaleY(1); } 40%{ top: 0; left: -150px; } 60%{ top: -200px; left: -150px; } 85%{ top: -200px; left: 150px; } 100%{ top: 0; filter: hue-rotate(360deg); left: 150px; } } </style></head><body> <div class="loader"> <span style="--i:0"></span> <!-- --i:0 这是什么写法--> <span style="--i:1"></span> <span style="--i:2"></span> <span style="--i:3"></span> <span style="--i:4"></span> <span style="--i:5"></span> <span style="--i:6"></span> <span style="--i:7"></span> </div></body></html>