版权归作者所有，转载请注明出处
过度与变形
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过度与变形</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
div{
width: 100%;
height: 1000px;
margin: 0 auto;
background:rgb(218, 197, 228);
}
ul{
display: flex;
justify-content: space-around;
width: 100%;
height: 250px;
padding-top: 30px;
}
ul li{
width: 120px;
height: 270px;
margin: 20px;
text-align: center;
}
ul li span{
color: rgb(27, 85, 82);
line-height: 50px;
}
ul li p{
border: 5px solid rgb(27, 85, 82);
border-radius: 5px;
overflow: hidden;
}
ul li p img{
width: 190px;
}
ul li:nth-of-type(1) p{
transition-duration: 2s;
}
ul li:nth-of-type(1) p:hover{
border-radius: 120px;
}
ul li:nth-of-type(2) p img{
transform: scale(1);
transition-duration: 2s;
}
ul li:nth-of-type(2) p:hover img{
transform: scale(2);
}
ul li:nth-of-type(3) p{
transition-duration: 2s;
}
ul li:nth-of-type(3) p:hover{
transform: rotate(45deg);
}
ul li:nth-of-type(4) p{
transition-duration: 2s;
}
ul li:nth-of-type(4) p:hover{
opacity:0.4;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span>方框变圆</span>
<p><img src="1.jpg" ></p>
</li>
<li>
<span>图片放大</span>
<p><img src="2.jpg"" ></p>
</li>
<li>
<span>方框倾斜</span>
<p><img src="3.jpg"" ></p>
</li>
<li>
<span>颜色变淡</span>
<p><img src="img/4.jpg"" ></p>
</li>
</ul>
</div>
</body>
</html>
