实验报告-过度与变形的综合应用_过度变形的案例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46444569/article/details/105199211

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>过渡与变形的综合应用</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			background-color: black;
		}
		.firstdiv{
			width: 1000px;
			margin: 200px auto;
		}
		.scenddiv{
			width: 200px;
			margin: 20px;
			float: left;
		}
		.scenddiv img{
			width: 200px;
			height: 200px;
			border: 5px solid #ccc;
			border-radius: 5px;
			transition:3s;
		}
		.scenddivA img:hover{
			border-radius: 100px;
			box-shadow: 0 0 20px 5px white;
		}
		.scenddivB img:hover{
			transform: scale(1.4);
			box-shadow: 0 0 20px 5px white;
		}
		.scenddivC img:hover{
			transform:rotate(20deg);
			box-shadow: 0 0 20px 5px white;
		}
		.scenddivD img:hover{
			transform: perspective(50px);
			filter: grayscale(1);
			box-shadow: 0 0 20px 5px white;
		}
	</style>
</head>
<body>
	<div class="firstdiv">
		<div class="scenddiv scenddivA"><img src="images/1.jpg" alt=""></div>
		<div class="scenddiv scenddivB"><img src="images/2.jpg" alt=""></div>
		<div class="scenddiv scenddivC"><img src="images/3.jpg" alt=""></div>
		<div class="scenddiv scenddivD"><img src="images/4.jpg" alt=""></div>
	</div>
</body>
</html>

在这里插入图片描述