Let's do such a case today
Add an animation to achieve the effect of gradient scrolling up and down
First of all, our HTML part, a big box contains five sub-elements
Don’t worry about it below, I saw a website with such a comment when I wrote it before, so I copied it hahaha
<div class="loader">
<div class="slider" style="--i:0">
</div>
<div class="slider" style="--i:1">
</div>
<div class="slider" style="--i:2">
</div>
<div class="slider" style="--i:3">
</div>
<div class="slider" style="--i:4">
</div>
</div>
<!-- keywords fixed by:lxl passed by:PTB ↑↑↑关键词也太多了，已经导致被k站了，修改了。-->
<!-- wogiao 你没事为啥老来改网站？客户端bug后端内存溢出问题解决了？主机加速适配了？-->
<!-- 管你屁事 -->
<!-- keywords fixed by:wogaio passed by:PTB 修改关键词，现在应该不会被Ai误判了。--><!--new by:yjj 2023/1/25 wogiao那哥们骂我，**的，他的 经典 我给他保留了，美其名曰：节目效果-->
<!-- 写网页前端的哥们，老子cnm，代码全部不格式化，上面喊你改也不改，老子开发客户端的跑来给你手动格式化，你是真特么nt，祝你早日滚蛋！下面写的sb滚动把图床快干废了，一天跑了3t流量你是真的牛逼，老子直接给你删了，都不想给你注释化，滚！ by:wogiao 2022年11月25日 -->
<!--
▃▆█▇▄▖
▟◤▖ ◥█▎
◢◤ ▐ ▐▉
▗◤ ▂ ▗▖ ▕█▎
◤ ▗▅▖◥▄ ▀◣ █▊
▐ ▕▎◥▖◣◤ ◢██
█◣ ◥▅█▀ ▐██◤
▐█▙▂ ◢██◤
◥██◣ ◢▄◤
▀██▅▇▀
哲学♂♂ 114514-->The first step, first of all, we have to set up a flexible layout for our big box
Center parent element horizontally and vertically
.loader{
display: flex;
align-items: center;
justify-content: center;
The second step is to set the child elements
Set a hidden redundant style, then we set the width and height of the box, the inner and outer margins, the radian of the border and the radian of the inner shadow, and finally set a relative positioning, so that its child elements are set to relative positioning
.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;
}
The third step is to set the pseudo element of the child element
content is essential, because this is a main body, without this there is no content, then we continue to set absolute positioning, place it in the upper left corner, then set the width and height colors, and finally we add a transition method, and then we will add animation below
.slider::before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 20px;
background: #2697f3;
animation: alternate_2 2.5s ease-in-out infinite;
}
The fourth step is to add animation
@keyframes alternate_2{
from{
transform: translateY(80px);
filter: hue-rotate(0deg);
}
50%{
transform: translateY(20px);
}
to{
transform: translateY(80px);
filter: hue-rotate(360deg);
}
}
from: the meaning of the beginning, and then the upper body 80px along the y axis
Then when it reaches fifty, it goes down 20px along the Y
When the percentage is to, it is restored. We add a transitional color to the filter here.
Then this code creates five div elements, each with the class name "slider". But the difference between them is the value of the variable "--i" in their inline styles. Therefore, they will be considered as a group of five related but separate sliders.
The variable "--i" is used to set the index of the current slider (starting from 0). This means that the first div element will display the first image, the second will display the second image, and so on.
When defining each ".slider" class with other rules in the CSS stylesheet, the variable "--i" can be used to apply a different style to each slider.
<div class="slider" style="--i:0">
</div>
<div class="slider" style="--i:1">
</div>
<div class="slider" style="--i:2">
</div>
<div class="slider" style="--i:3">
</div>
<div class="slider" style="--i:4">
</div>
The final code uses CSS pseudo-elements ::before to .slider animate each element.
Among them, animation the attribute specifies alternate_2 the animation named to be used, the duration is 2.5 seconds, the easing function is ease-in-out, and the animation loops infinitely.
The animation-delay attribute is to set the delay time, which uses variables var(--i) to determine the delay time of each element. --i The value of the CSS variable .slider is different in each element, so the delay time is different for each element. Among them, -0.5s*var(--i) the initial animation delay time of each slider is set by calculation, which means that the first slider does not need any delay, and the subsequent sliders will add a delay of 0.5 seconds in turn.
.slider::before{
animation: alternate_2 2.5s ease-in-out infinite;
animation-delay: calc(-0.5s*var(--i));
}
Next is the source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.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;
}
.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);
}
}
.slider::before{
animation: alternate_2 2.5s ease-in-out infinite;
animation-delay: calc(-0.5s*var(--i));
}
</style>
</head>
<body>
<div class="loader">
<div class="slider" style="--i:0">
</div>
<div class="slider" style="--i:1">
</div>
<div class="slider" style="--i:2">
</div>
<div class="slider" style="--i:3">
</div>
<div class="slider" style="--i:4">
</div>
</div>
<!-- keywords fixed by:lxl passed by:PTB ↑↑↑关键词也太多了，已经导致被k站了，修改了。-->
<!-- wogiao 你没事为啥老来改网站？客户端bug后端内存溢出问题解决了？主机加速适配了？-->
<!-- 管你屁事 -->
<!-- keywords fixed by:wogaio passed by:PTB 修改关键词，现在应该不会被Ai误判了。--><!--new by:yjj 2023/1/25 wogiao那哥们骂我，**的，他的 经典 我给他保留了，美其名曰：节目效果-->
<!-- 写网页前端的哥们，老子cnm，代码全部不格式化，上面喊你改也不改，老子开发客户端的跑来给你手动格式化，你是真特么nt，祝你早日滚蛋！下面写的sb滚动把图床快干废了，一天跑了3t流量你是真的牛逼，老子直接给你删了，都不想给你注释化，滚！ by:wogiao 2022年11月25日 -->
<!--
▃▆█▇▄▖
▟◤▖ ◥█▎
◢◤ ▐ ▐▉
▗◤ ▂ ▗▖ ▕█▎
◤ ▗▅▖◥▄ ▀◣ █▊
▐ ▕▎◥▖◣◤ ◢██
█◣ ◥▅█▀ ▐██◤
▐█▙▂ ◢██◤
◥██◣ ◢▄◤
▀██▅▇▀
哲学♂♂ 114514-->
</body>
</html>