代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡与变形</title>
<style type="text/css">
body
{
margin:0;
padding:0;
}
/*盒子样式*/
.Back
{
width: 1000px;
height: 300px;
background-color: black;
}
/*图片位置格式*/
.IMG
{
margin-left: 50px;
margin-top: 30px;
width: 180px;
height: 210px;
font-size: 12px;
color: white;
text-align: center;
float: left;
}
/*边框样式*/
.IMG .b
{
margin-top: 15px;
width: 180px;
height: 180px;
border: 5px solid white;
border-radius: 5px;
transition: all 1s;
overflow: hidden;
}
/*图片格式*/
.IMG .b img
{
width: 180px;
height: 180px;
transition: all 0.5s;
}
/*缩放效果*/
.IMG:nth-child(1)
.b:hover
{
border-radius:40%;
}
/*圆角边框效果*/
.IMG:nth-child(2)
.b img:hover
{
transform: scale(1.5);
}
/*旋转效果*/
.IMG:nth-child(3)
.b:hover
{
transform: rotate(20deg);
}
/*盒阴影效果*/
.IMG:nth-child(4)
.b img:hover
{
filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="Back">
<div class="IMG">
SHAPE
<div class="b">
<img src="1.PNG" alt="">
</div>
</div>
<div class="IMG">
DISPLACEMENT
<div class="b">
<img src="2.PNG" alt="">
</div>
</div>
<div class="IMG">
POSITION
<div class="b">
<img src="3.PNG" alt="">
</div>
</div>
<div class="IMG">
COLOR
<div class="b">
<img src="4.PNG" alt="">
</div>
</div>
</div>
</body>
</html>效果图展示
最初效果图
缩放效果图
圆角边框效果
旋转效果图
盒阴影效果图
