CSS实现活跃读者列表的鼠标悬停动画效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>【每日一练】91—CSS实现活跃读者列表的鼠标悬停动画效果</title>
	</head>
	<body>
		<section>
			<div class="box">
				<h3>活跃读者排行榜</h3>
				<div class="list">
					<div class="imgBx">
						<img src="imgs/work.png">
					</div>
					<div class="content">
						<h2 class="rank"><small>#</small>1</h2>
						<h4>王二</h4>
						<p>持续阅读100天</p>
					</div>
				</div>
				<div class="list">
					<div class="imgBx">
						<img src="imgs/work.png">
					</div>
					<div class="content">
						<h2 class="rank"><small>#</small>2</h2>
						<h4>张三</h4>
						<p>持续阅读90天</p>
					</div>
				</div>
				<div class="list">
					<div class="imgBx">
						<img src="imgs/work.png">
					</div>
					<div class="content">
						<h2 class="rank"><small>#</small>3</h2>
						<h4>李四</h4>
						<p>持续阅读80天</p>
					</div>
				</div>
				<div class="list">
					<div class="imgBx">
						<img src="imgs/work.png">
					</div>
					<div class="content">
						<h2 class="rank"><small>#</small>4</h2>
						<h4>赵五</h4>
						<p>持续阅读70天</p>
					</div>
				</div>
				<div class="list">
					<div class="imgBx">
						<img src="imgs/work.png">
					</div>
					<div class="content">
						<h2 class="rank"><small>#</small>5</h2>
						<h4>甄六</h4>
						<p>持续阅读60天</p>
					</div>
				</div>
			</div>
		</section>
	</body>
</html>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: #fcfcfc;
	}

	.box {
		position: relative;
		min-width: 425px;
		background: #00bcd4;
		padding: 20px;
		box-shadow: 0 35px 50px rgba(0, 0, 0, 0.1);
	}

	.box::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% - 75px);
		height: 100%;
		background: #fff;
	}

	.box h3 {
		position: relative;
		color: #333;
		font-size: 1.5em;
		margin-bottom: 20px;
		padding-left: 70px;
	}

	.box .list {
		position: relative;
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 10px 0;
		cursor: pointer;
	}

	.box .list::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: #00bcd4;
		transition: transform 0.5s;
		transform: scaleX(0);
		transform-origin: right;
	}

	.box .list:hover::before {
		transition: transform 0.5s;
		transform: scaleX(1);
		transform-origin: left;
	}

	.box .list .imgBx {
		position: relative;
		min-width: 70px;
		height: 70px;
		background: #fff;
		overflow: hidden;
		border: 6px solid #fff;
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
		margin-right: 20px;
		margin-left: 10px;
	}

	.box .list .imgBx img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.box .list .content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		color: #333;
	}

	.box .list .content .rank {
		position: absolute;
		right: 0;
		font-size: 2em;
		color: #fff;
		transform: scale(0);
		transition: 0.5s;
	}

	.box .list .content .rank small {
		font-weight: 500;
		opacity: 0.25;
	}

	.box .list:hover .content .rank {
		transform: scale(1);
	}

	.box .list .content h4 {
		font-weight: 600;
		line-height: 1.2em;
		text-transform: uppercase;
		transition: 0.5s;
	}

	.box .list .content p {
		opacity: 0.85;
		transition: 0.5s;
	}

	.box .list:hover .content h4,
	.box .list:hover .content p {
		color: #fff;
	}
</style>
posted @ 2025-02-25 16:55  刘酸酸sour  阅读(12)  评论(0)    收藏  举报