1

最新推荐文章于 2022-12-30 11:19:35 发布

白黑的迷糊

最新推荐文章于 2022-12-30 11:19:35 发布

阅读量166

点赞数 1

本文链接：https://blog.csdn.net/qwq111qq/article/details/105125593

版权

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过度和变形的应用</title>
<style>
.box{
		width: 1200px;
		height: 300px;
		background-color: black;
}
.box .nes{
		width: 250px;
		height: 250px;
		margin-left: 30px;
		margin-top: 20px;
		color: white;
		text-align: center;		
		float: left;				
}
.box .nes .nesnes{
		width: 200px;
		height: 200px;
		margin-top: 10px;
		margin-left: 20px;
		border: 5px solid white;
		border-radius: 10%;
		overflow: hidden;
		transition: all 1s;
			}
.box .nes .nesnes img{
		width: 200px;
		height: 200px;
		transition: all 1s;
}
.box .nes:nth-child(1) .nesnes:hover{
		border-radius: 50%;
}			
.box .nes:nth-child(2) .nesnes img:hover{
		transform: scale(1.8);
}	
.box .nes:nth-child(3) .nesnes:hover{
		transform: rotate(35deg);
}
.box .nes:nth-child(4) .nesnes img:hover{
				filter: grayscale(100%);
}
.box .nes .nesnes:hover{
				box-shadow:0px 0px 88px #888888;
}
</style>
</head>
<body>
		<div class="box">
			<div class="nes">
				SHAPE
				<div class="nesnes">
					<img src="shitupianya/1.jpg" >
				</div>
			</div>
			<div class="nes">
				DISPLACEMENT
				<div class="nesnes">
					<img src="shitupianya/2.jpg">
				</div>
			</div>
			<div class="nes">
				POSITION
				<div class="nesnes">
					<img src="shitupianya/3.jpg">
				</div>
			</div>
			<div class="nes">
				COLOR
				<div class="nesnes">
					<img src="shitupianya/4.jpg">
				</div>
			</div>
		</div>
	</body>
</html>

白黑的迷糊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1

别问，问就是套娃<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫

1

“相关推荐”对你有帮助么？