transition属性、2D变形的使用，transform属性实现过渡及变形效果。
- 当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果。
- 当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。
- 当鼠标移上第三张图像时，产生图片旋转的过渡效果
- 当鼠标移上第四张图像时，产生图片透明逐渐变暗的过渡效果，并且伴随盒子阴影效果过渡。
<!DOCTYPE<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
body{
background: black;
}
img{
width: 100px;
height: 100px;
border:white solid 5px;
border-radius: 5px;
}
h5{
color: white;
text-size-adjust: 20px;;
}
div{
width: 130px;
float: left;
text-align: center;
margin-left: 20px;
}
.tu1:hover{
border-radius: 50%;
transition: ease 3s;
}
.tu2:hover{
width:120px;
height: 110px;
transition: ease 3s;
}
.tu3:hover{
transform: rotate(10deg);
transition: ease all 2s;
}
.tu4:hover{
box-shadow:rgb(99, 100, 99);
transition: ease 3s all;
filter:grayscale(100%);
}
</style>
</head>
<body>
<div class="one">
<h5>SHAPE</h5>
<img src="image/1 (1).jpg" alt="" class="tu1">
</div>
<div class="one">
<h5>DISPLACEMENT</h5>
<img src="image/1 (2).jpg" alt="" class="tu2">
</div>
<div class="one">
<h5>POSITION</h5>
<img src="image/1 (3).jpg" alt="" class="tu3">
</div>
<div class="one">
<h5>COLOR</h5>
<img src="image/u=3419227979,1522419926&fm=26&gp=0.jpg" alt="" class="tu4">
</div>
</body>
</html>
效果图如下：
