代碼如下：
<!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>
效果圖展示
最初效果圖
縮放效果圖
圓角邊框效果
旋轉效果圖
盒陰影效果圖