使用CSS实现酷炫加载
效果展示
整体页面布局
html
<div class="container"></div>
使用JavaScript添加loading加载动画的元素
javascript
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元素样式
css
.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动画
css
@keyframes animate {
0% {
transform: translateX(250px) scale(4);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(-10px) scale(0);
}
}
使用 filter
属性修改颜色
css
.container {
filter: hue-rotate(70deg);
}