实验报告-过度与变形的综合应用

最新推荐文章于 2021-08-14 20:57:27 发布

全栈的魅力

最新推荐文章于 2021-08-14 20:57:27 发布

阅读量152

点赞数 1

本文链接：https://blog.csdn.net/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>

在这里插入图片描述

全栈的魅力

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验报告-过度与变形的综合应用

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ margin: 0; padding: 0; ba...
复制链接

扫一扫