【前端小实战】遮罩层动画效果

最新推荐文章于 2024-05-17 14:32:46 发布

Fetters04

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量386

点赞数 1

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_53569667/article/details/128748369

版权

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body {
				background-color: black;
			}
			
			.box {
				width: 250px;
				height: 300px;
				border-radius: 50%;
				border: 4px solid white;
				overflow: hidden;
				position: relative;
				box-shadow: 0 0 30px skyblue;
				display: inline-block;
				margin: 10px;
			}
			
			/* 遮罩层 */
			.box .cover {
				position: absolute;
				background-color: black;
				
				/* 遮罩层尺寸设置和box一样 */
				width: 250px;
				height: 300px;
				border-radius: 50%;
				opacity: 0;					/* 隐藏 */
				transform: scale(0);		/* 缩放效果 */
				transition: all 1s ease;	/* 所有动画1s内完成 */
				
				/* 设置文字展示 */
				font-size: 50px;
				line-height: 300px;
				text-align: center;
				font-family: "楷体";
			}
			
			/* 鼠标经过时的遮罩层 */
			.box:hover .cover {
				opacity: 0.5;
				transform: scale(1);		/* 当鼠标经过时有个从0~1的缩放效果 */
			}
			
			/* 调整路飞图片的展示 */
			.box #lufei_img {
				height: 100%;
				position: absolute;
				left: -15px;
			}
			
			/* 调整索隆图片的展示 */
			.box #suolong_img {
				height: 100%;
				position: absolute;
				left: -50px;
			}

			/* 调整娜美图片的展示 */
			.box #namei_img {
				height: 100%;
				position: absolute;
				left: -20px;
			}
			
			.box #wusupu_img {
				height: 100%;
				position: absolute;
				left: -30px;
			}
			
			.box #shanzhi_img {
				height: 100%;
				position: absolute;
				left: -20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./img/cover_lufei.png" alt="" id="lufei_img">
			<div class="cover" style="color: red;">路飞</div>
		</div>
		
		<div class="box">
			<img src="./img/cover_suolong.png" alt="" id="suolong_img">
			<div class="cover" style="color: green;">索隆</div>
		</div>
		
		<div class="box">
			<img src="./img/cover_namei.png" alt="" id="namei_img">
			<div class="cover" style="color: orange;">娜美</div>
		</div>
		
		<div class="box">
			<img src="./img/cover_wusuopu.png" alt="" id="wusupu_img">
			<div class="cover" style="color: seagreen;">乌索普</div>
		</div>
		
		<div class="box">
			<img src="./img/cover_shanzhi.png" alt="" id="shanzhi_img">
			<div class="cover" style="color: yellow;">山治</div>
		</div>
	</body>
</html>