使用CSS实现酷炫加载

使用CSS实现酷炫加载

效果展示

整体页面布局

<div class="container"></div>

使用JavaScript添加loading加载动画的元素

document.addEventListener("DOMContentLoaded", () => {let container = document.querySelector(".container");for (let j = 0; j < 4; j++) {let loader = document.createElement("div");loader.classList.add("loader");loader.style.setProperty("--j", j);for (let i = 0; i <= 20; i++) {let span = document.createElement("span");span.style.setProperty("--i", i);loader.appendChild(span);}container.appendChild(loader);}});

编写loading元素样式

.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;
}.loader {position: relative;transform: rotate(calc(45deg * var(--j)));
}.loader span {position: absolute;transform: rotate(calc(18deg * var(--i)));
}.loader span {position: absolute;
}.loader span::before {content: "";position: absolute;width: 15px;height: 15px;border: 2px solid #00ff0a;border-radius: 2px;animation: animate 5s linear infinite;animation-delay: calc(-0.5s * var(--i));
}.loader:nth-child(even) span::before {background: #00ff0a;
}

实现上述代码后，效果如下：

实现loading动画

@keyframes animate {0% {transform: translateX(250px) scale(4);opacity: 0;}50% {opacity: 1;}100% {transform: translateX(-10px) scale(0);}
}

使用 filter 属性修改颜色

.container {filter: hue-rotate(70deg);
}

完整代码下载

完整代码下载