这段代码创建了一个动画加载条，通过 CSS 动画模拟加载进度的填充和光效的变化。这种效果适用于页面加载、数据加载或其他需要显示进度的场景。加载条的动画效果使得等待过程更加直观和有趣。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.loaderBar {
width: calc(160px / 0.707);
height: 10px;
background: #F9F9F9;
border-radius: 10px;
border: 1px solid #006DFE;
position: relative;
overflow: hidden;
}
.loaderBar::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 5px;
background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;
animation: fillProgress 6s ease-in-out infinite, lightEffect 1s infinite linear;
animation-fill-mode: forwards;
}
@keyframes fillProgress {
0% {
width: 0;
}
33% {
width: 33.333%;
}
66% {
width: 66.67%;
}
100% {
width: 100%;
}
}
@keyframes lightEffect {
0%,
20%,
40%,
60%,
80%,
100% {
background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;
}
10%,
30%,
50%,
70%,
90% {
background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px, rgba(255, 255, 255, 0.3) 0 40px) right/200% 100%;
}
}
</style>
</head>
<body>
<div class="loaderBar"></div>
</body>
</html>
HTML 结构
- loaderBar：定义了一个类名为 loaderBar 的 div 元素，用于显示加载条。
CSS 样式
- body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
- .loaderBar：定义了加载条的基本样式，包括宽度、高度、背景色、边框半径、边框和位置。它使用 overflow: hidden;来裁剪超出边界的内容。
- .loaderBar::before：使用伪元素::before 在加载条内部创建一个绝对定位的元素，用于显示加载进度和光效动画。content：设置为空字符串，因为不需要显示任何内容，只需要伪元素的盒子。position: absolute;：将伪元素定位在 loaderBar 内部。background：使用渐变色创建一个重复的线性渐变背景，用于模拟加载效果。animation：应用两个动画，fillProgress 用于模拟加载进度的填充，lightEffect 用于模拟光效的变化。animation-fill-mode: forwards;：确保动画完成后，元素保持在动画结束时的状态。
- @keyframes fillProgress：定义了一个关键帧动画，用于控制加载进度的宽度变化。0%：宽度为 0，表示加载开始。33%：宽度为 33.333%，表示加载进度的三分之一。66%：宽度为 66.67%，表示加载进度的三分之二。100%：宽度为 100%，表示加载完成。
- @keyframes lightEffect：定义了一个关键帧动画，用于模拟光效的变化。在不同的百分比时刻，改变背景渐变中的颜色，以模拟光线闪烁的效果。
