今天来做这么一个案例
添加一个动画实现上下渐变滚动的效果
首先还是我们HTML部分，一个大盒子装着五个子元素
下面别在意，之前写的时候看到有个网站有这么个注解我就复制了下来哈哈哈
第一步首先呢我们得让我们的大盒子设置一个弹性布局
让父元素水平垂直居中
.loader{
display: flex;
align-items: center;
justify-content: center;
第二步我们来设置子元素
设置一个隐藏多余的样式，然后我们设置这个盒子宽高大小还有内外边距还有边框弧度加上内阴影弧度，最后设置一个相对定位，使他的子元素设置为据对定位
.slider{
overflow: hidden;
background-color: whitesmoke;
border: 1px solid rgba(128,128,0.276);
height: 80px;
width: 20px;
margin: 0 15px;
border-radius: 30px;
box-shadow: inset -5px -5px 10px #0000001a,
inset -5px -5px 10px #0000001a;
position: relative;}
第三步设置子元素的伪元素
content必不可少，因为这是一个主体，没有这个就没有内容，然后我们在继续设置绝对定位，置于左上角，然后设置宽高颜色，最后我们添加一个过渡方式，然后再下面我们来加动画
.slider::before{
content: “”;
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 20px;
background: #2697f3;
animation: alternate_2 2.5s ease-in-out infinite;
}
第四步添加动画
@keyframes alternate_2{
from{
transform: translateY(80px);
filter: hue-rotate(0deg);
}
50%{
transform: translateY(20px);
}
to{
transform: translateY(80px);
filter: hue-rotate(360deg);
}
}
from：开始的意思，然后沿着y轴上身80px
然后到五十的时候有沿着Y又下来20px
到百分比也就是to的时候就是还原，这里的filter我们是给他添加一个过渡的颜色
然后呢这段代码创建了五个 div 元素，每个元素带有类名为 “slider”。但是它们之间的区别在于其内联样式中的变量 “–i” 的值。因此，它们将被视为一个由五个相关但独立的滑块组成的组。
变量 “–i” 用于设置当前滑块的索引（从 0 开始）。这意味着第一个 div 元素将显示第一张图片，第二个将显示第二张图片，以此类推。
当使用 CSS 样式表中的其他规则来定义每个 “.slider” 类时，可以使用变量 “–i” 来针对每个滑块应用不同的样式。
最后代码使用 CSS 伪元素::before为每个.slider元素添加一个动画效果。
其中animation属性指定了使用名为alternate_2的动画，持续时间为 2.5 秒，缓动函数为ease-in-out，而且该动画无限循环。
而animation-delay属性则是设置延迟时间，它使用了变量var(--i)来决定每个元素的延迟时间。CSS 变量--i的值在每个.slider元素中都不同，因此每个元素的延迟时间也不同。其中通过计算-0.5s*var(--i)来设置每个滑块初始的动画延迟时间，这意味着第一个滑块不需要任何延迟，而后面的滑块则依次加上 0.5 秒的延迟时间。
.slider::before{
animation: alternate_2 2.5s ease-in-out infinite;
animation-delay: calc(-0.5s*var(–i));
}
接下来是源码：