任务
实现以下效果演示：
思路
首先准备图片资源，如下
然后，由效果图可知，悬停一个图标上时，背景图标旋转360°，前景图标放大一定倍数。
因此，用li标签来当作容器时，悬停在一个li上产生上述效果，此时不能用背景图标当作li的背景图片，否则只能对li本身旋转才能带动背景图片一起旋转，这样的话前景图标就会跟着旋转。
所以，li只能用作悬停效果，在li里面插入这两个图片，分别采用不同的过渡效果：可以使用::before伪元素当作子元素再给它添加背景图标当作背景图片。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.html</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 508px;
height: 107px;
margin: 100px auto;
}
.box ul{
list-style: none;
}
.box ul li{
float: left;
width: 107px;
height: 107px;
margin-right: 20px;
position: relative;
}
/*
如果给li添加背景图片，当它旋转时也会带动里面的子元素图标，因此思路是
这两个图片一定是li的两个子元素，一个旋转，一个放大，互不影响。
故好的思路是：直接创建伪元素添加背景图片（不用额外创建一个div去包裹
它-当然也行），然后图标通过定位-相对于父盒子li，去实现覆盖居中。
也可以直接插入两个图片。
*/
.box ul li::before{
content: '';
display: block;
width: 107px;
height: 107px;
/* 最好加个初始值 */
transform: rotate(0);
transition: transform .8s ease 0s;
}
.box ul li:nth-child(1):before{
background-image: url(images/a_1.png);
}
.box ul li:nth-child(2):before{
background-image: url(images/a_2.png);
}
.box ul li:nth-child(3):before{
background-image: url(images/a_3.png);
}
.box ul li:nth-child(4):before{
background-image: url(images/a_4.png);
}
.box ul li:hover::before{
transform: rotate(360deg);
}
.box ul li img{
width: 60px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
transition: transform .8s ease 0s;
}
.box ul li:hover img{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="images/icon1.svg" alt="">
</li>
<li>
<img src="images/icon2.svg" alt="">
</li>
<li>
<img src="images/icon3.svg" alt="">
</li>
<li>
<img src="images/icon4.svg" alt="">
</li>
</ul>
</div>
</body>
</html>
