1.效果
鼠標(biāo)移入圖片散開(kāi).gif
2.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.container,
.container li {
width: 250px;
height: 150px;
margin: 150px auto;
position: relative;
}
.container li {
display: inline-block;
}
.container li img,
.container li {
width: 250px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
}
.container:hover li:nth-of-type(1) {
position: absolute;
top: -86px;
left: 155px;
transform: rotate(133deg);
transition: all 1s;
}
.container:hover li:nth-of-type(2) {
position: absolute;
top: -122px;
left: -70px;
transform: rotate(63deg);
transition: all 1s;
}
.container:hover li:nth-of-type(3) {
position: absolute;
top: -138px;
left: 40px;
transform: rotate(103deg);
transition: all 1s;
}
.container:hover li:nth-of-type(4) {
position: absolute;
top: -52px;
left: -150px;
transform: rotate(30deg);
transition: all 1s;
}
.container:hover li:nth-of-type(5) {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<ul class="container">
<li><img src="./vipUI/images/idx1.jpg" alt=""></li>
<li><img src="./vipUI/images/idx1.jpg" alt=""></li>
<li><img src="./vipUI/images/idx1.jpg" alt=""></li>
<li><img src="./vipUI/images/idx1.jpg" alt=""></li>
<li><img src="./vipUI/images/idx1.jpg" alt=""></li>
</ul>
</body>
</html>
