css特效组件---垂直卡片滚动_css卡片滑动组件-CSDN博客

本文链接：https://blog.csdn.net/Jasonslw/article/details/123954683

效果展示

垂直卡片滚动

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直卡片滑动</title>
		<link rel="stylesheet" type="text/css" href="../css/垂直卡片滑动.css"/>
	</head>
	<body>
		<div class="wrapper">
			<div class="card" style="--delay:-1;">
				<div class="content">
					<div class="img"><img src="../img/03.jpeg" alt=""></div>
					<div class="details">
						<span class="name">Sumit Kapoor</span>
						<p>Frontend Developer</p>
					</div>
					
				</div>
				<a href="">Follow</a>
			</div>
			<div class="card" style="--delay:0;">
				<div class="content">
					<div class="img"><img src="../img/04.jpeg" alt=""></div>
					<div class="details">
						<span class="name">Sumit Kapoor</span>
						<p>Frontend Developer</p>
					</div>
					
				</div>
				<a href="">Follow</a>
			</div>
			<div class="card" style="--delay:1;">
				<div class="content">
					<div class="img"><img src="../img/02.jpeg" alt=""></div>
					<div class="details">
						<span class="name">Sumit Kapoor</span>
						<p>Frontend Developer</p>
					</div>
					
				</div>
				<a href="">Follow</a>
			</div>
			<div class="card" style="--delay:2;">
				<div class="content">
					<div class="img"><img src="../img/05.jpeg" alt=""></div>
					<div class="details">
						<span class="name">Sumit Kapoor</span>
						<p>Frontend Developer</p>
					</div>
					
				</div>
				<a href="">Follow</a>
			</div>
			<div class="card" style="--delay:3;">
				<div class="content">
					<div class="img"><img src="../img/06.jpeg" alt=""></div>
					<div class="details">
						<span class="name">Sumit Kapoor</span>
						<p>Frontend Developer</p>
					</div>
					
				</div>
				<a href="">Follow</a>
			</div>
		</div>
	</body>
</html>

css展示

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "agency fb",sans-serif;
}
body{
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,#bea2e7 20%,#86b7e7 100%);
}
.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.wrapper .card{
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	background: #fff;
	border-radius: 100px 20px 20px 100px;
	padding: 20px;
	width: 430px;
	animation: animate 5s linear infinite;
	animation-delay: calc(1s * var(--delay));
}
.wrapper:hover .card{
	animation-play-state: paused;
}
.wrapper .card:last-child{
	animation-delay: calc(1s * var(--delay));
}
@keyframes animate{
	0%{
		opacity: 0;
		transform: translateY(100%) scale(0.5);
	}
	5%,20%{
		opacity: 0.4;
		transform: translateY(100%) scale(0.7);
	}
	25%,40%{
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0%) scale(1);
	}
	45%,60%{
		opacity: 0.4;
		transform: translateY(-100%) scale(0.7);
	}
	65%,100%{
		opacity: 0;
		transform: translateY(-100%) scale(0.5);
	}

}
.card .content{
	display: flex;
	align-items: center;
}
.wrapper .card .img{
	position: absolute;
	left: -5px;
	background: #fff;
	padding: 5px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	border-radius: 50%;
	width: 90px;
	height: 90px;
}
.wrapper .card .img img{
	width: 100%;
	border-radius: 50%;
	height: 100%;
	object-fit: cover;
}
.card .details{
	margin-left: 80px;
}
.details span{
	font-weight: 600;
	font-size: 18px;
}
.card a{
	text-decoration: none;
	padding: 7px 18px;
	border-radius: 25px;
	color: #fff;
	background:  linear-gradient(to bottom,#bea2e7 20%,#86b7e7 100%);
}