HTML+CSS 液体加载组件
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>液体加载组件</title> <link rel="stylesheet" href="./46-液体加载组件.css"> </head>
<body> <div class="loading"> <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> <svg> <filter id="gooey"> <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur> <feColorMatrix values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10 "></feColorMatrix> </filter> </svg> </body>
</html> |
CSS:
|
* { margin: 0; padding: 0; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #222; }
svg { width: 0; height: 0; }
.loading { position: relative; width: 200px; height: 200px; filter: url(#gooey); }
.loading span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; animation: animate 4s ease-in-out infinite; animation-delay: calc(0.2s * var(--i)); }
.loading span::before { content: ""; position: absolute; top: 0; left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(#d1f5ff, #1683ff); box-shadow: 0 0 30px #1683ff; }
@keyframes animate { 0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(360deg); } } |
