一个纯的CSS3实现的动画加载效果，在页面中心显示一组水平排列的圆柱形元素，这些元素通过CSS动画模拟出一种动态移动的效果。每个圆柱形元素都有一个独特的延迟时间，从而形成一个连续的浪涌动画效果。
这段代码实现了一个简单的CSS动画加载器，用于在网页上显示一个动态的加载效果。以下是对其各个部分的详细解释：
- HTML结构：
<!DOCTYPE html>：声明文档类型为HTML5。<html lang="en">：设置整个HTML文档的语言为英语。<head>：包含元数据和样式表。<meta charset="UTF-8">：设置字符编码为UTF-8，支持多种语言字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：使页面适应不同设备的屏幕宽度，并初始缩放比例为1.<title>CSS Loader Animation</title>：设置网页标题为空。<style>：嵌入的CSS样式表，定义了页面的外观和动画效果。
<body>：包含页面的主要内容。<section class="loader">：创建一个容器来容纳加载器组件。- 多个
<div style="--i:0" class="slider"></div>：每个<div>代表一个圆柱形元素，通过--i自定义属性设置不同的延迟时间。
- CSS样式：
body：height: calc(100vh - 80px);：设置页面高度为视口高度减去80像素。display: grid; place-content: center;：使用网格布局并将内容居中对齐。background-color: #f0f0f0;：设置背景颜色为浅灰色。
.loader：display: flex; align-items: center; justify-content: center; flex-direction: row;：使用Flexbox布局，将子元素水平排列并居中对齐。
.slider：overflow: hidden;：隐藏超出边界的内容。background-color: white;：设置背景颜色为白色。margin: 0 15px;：设置左右外边距为15像素。height: 80px; width: 20px;：设置高度为80像素，宽度为20像素。border-radius: 30px;：设置圆角半径为30像素，使其看起来像一个圆柱体。box-shadow: ...;：添加阴影效果，增强视觉层次感。position: relative;：设置相对定位，以便伪元素可以相对于它进行绝对定位。
.slider::before：content: "";：生成一个空内容的伪元素。position: absolute; top: 0; left: 0;：将伪元素定位到父元素的左上角。height: 20px; width: 70px;：设置伪元素的高度和宽度。border-radius: 100%;：设置圆形形状。box-shadow: ...;：添加内阴影和渐变色效果。animation: animate 2.5s ease-in-out infinite;：应用名为animate的动画，持续时间为2.5秒，缓动函数为ease-in-out，无限循环播放。animation-delay: calc(-0.09s * var(--i));：根据--i自定义属性设置不同的动画延迟时间，使得每个圆柱形元素依次开始动画。
@keyframes animate：- 定义了动画的关键帧：
0%：初始状态，元素位于顶部，旋转角度为-80度，色调未改变。50%：中间状态，元素回到原始位置，旋转角度为0度。100%：结束状态，元素再次移动到底部，旋转角度为80度，色调变为180度。
这种加载器通常用于网页应用中，当数据正在加载时给用户提供视觉反馈，表明系统正在进行某些后台操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3加载动画</title>
<style>
body {
height: calc(100vh - 80px);
display: grid;
place-content: center;
}
.loader {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.slider {
overflow: hidden;
background-color: white;
margin: 0 15px;
height: 80px;
width: 20px;
border-radius: 30px;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
inset -5px -5px 10px rgba(0, 0, 255, 0.1),
inset 5px 5px 10px rgba(0, 0, 0, 0.1);
position: relative;
}
.slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 70px;
border-radius: 100%;
box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
inset 0px 0px 0px rgba(0, 0, 0, 0.1);
animation: animate 2.5s ease-in-out infinite;
animation-delay: calc(-0.09s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(250px) rotate(-80deg);
filter: hue-rotate(0deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(250px) rotate(80deg);
filter: hue-rotate(180deg);
}
}
</style>
</head>
<body>
<section class="loader">
<div style="--i:0" class="slider"></div>
<div style="--i:1" class="slider"></div>
<div style="--i:2" class="slider"></div>
<div style="--i:3" class="slider"></div>
<div style="--i:4" class="slider"></div>
</section>
</body>
</html>
No responses yet