css3 loading特效
一个样式类，一个容器，无须额外元素：--main-color-rgba 为全局申明颜色变量，方便替换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Loading Animation</title> <style> :root { --main-color-rgba: 255,70,20; } #app { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #000; } .loader { width: 100%; height: 100%; position: relative; text-align: center; } .loader::after { margin: 0 auto; content: ''; display: inline-block; font-size: 10px; width: 1em; height: 1em; border-radius: 50%; position: absolute; top: calc(50% - 30px); text-indent: -9999em; animation: mulShdSpin 1.1s infinite ease; transform: translateZ(0); } @keyframes mulShdSpin { 0%, 100% { box-shadow: 0em -2.6em 0em 0em rgb(var(--main-color-rgba)), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.2), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.2), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.2), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.5), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.7), 1.8em -1.8em 0 0em rgb(var(--main-color-rgba)), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.2), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.2), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.2), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.5), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.7), 2.5em 0em 0 0em rgb(var(--main-color-rgba)), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.2), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.2), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.2), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.5), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.7), 1.75em 1.75em 0 0em rgb(var(--main-color-rgba)), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.2), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.2), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.5), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.7), 0em 2.5em 0 0em rgb(var(--main-color-rgba)), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.2), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.2), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.2), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.5), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.7), -1.8em 1.8em 0 0em rgb(var(--main-color-rgba)), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.2), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.2), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.2), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.5), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.7), -2.6em 0em 0 0em rgb(var(--main-color-rgba)), -1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(var(--main-color-rgba), 0.2), 1.8em -1.8em 0 0em rgba(var(--main-color-rgba), 0.2), 2.5em 0em 0 0em rgba(var(--main-color-rgba), 0.2), 1.75em 1.75em 0 0em rgba(var(--main-color-rgba), 0.2), 0em 2.5em 0 0em rgba(var(--main-color-rgba), 0.2), -1.8em 1.8em 0 0em rgba(var(--main-color-rgba), 0.5), -2.6em 0em 0 0em rgba(var(--main-color-rgba), 0.7), -1.8em -1.8em 0 0em rgb(var(--main-color-rgba)); } } </style> </head> <body id="app"> <div class="loader"></div> <!-- 在页面中添加一个元素作为加载动画 --> </body> </html>
效果：
