![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dba7a33f6259cae17e6e43fb39e0d878.gif)
实现如上图动态效果
<style>
.box {
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
}
.box:hover .img1 {
transform: translate(-50%, -50%) rotate(360deg);
}
.box:hover .img2 {
transform: translate(-50%, -50%) rotate(-360deg);
}
.box:hover .img3 {
transform: translate(-50%, -50%) rotate(-360deg);
}
.box .img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 1s;
}
.box .img1 {
width: 167px;
height: 167px;
background-image: url("images/page2_img1.png");
}
.box .img2 {
width: 185px;
height: 185px;
background-image: url("images/page2_img2.png");
}
.box .img3 {
width: 226px;
height: 226px;
background-image: url("images/page2_img3.png");
}
.box .img4 {
width: 299px;
height: 299px;
background-image: url("images/page2_img4.png");
}
</style>
<div class="box">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
<div class="img4 img"></div>
</div>