用CSS来做一个动画案例

今天来做这么一个案例

添加一个动画实现上下渐变滚动的效果

首先还是我们HTML部分，一个大盒子装着五个子元素

下面别在意，之前写的时候看到有个网站有这么个注解我就复制了下来哈哈哈

<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-->

第一步首先呢我们得让我们的大盒子设置一个弹性布局

让父元素水平垂直居中

.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" 来针对每个滑块应用不同的样式。

<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>

最后代码使用 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));
           }

接下来是源码：

<!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>

用CSS来做一个动画案例

猜你喜欢