问题
来源：2-10 过渡效果实战课（2）
期限_
2021-02-12 18:54:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
ul {
list-style: none;
width: 508px;
overflow: hidden;
margin: 100px auto;
}
ul li {
position: relative;
float: left;
width: 107px;
height: 107px;
margin-right: 20px;
}
ul li .icon {
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
}
ul li .img {
transform: rotate(0);
transition: transform 1s linear 0s;
}
ul li:hover .img {
transform: rotate(360deg);
}
ul li .icon {
transform: scale(1);
transition: transform 0.5s linear 0s;
}
ul li:hover .icon {
transform: scale(1.2);
}
</style>
<body>
<div class="box">
<ul>
<li>
<img class="img" src="img/a_1.png" alt="">
<img class="icon" src="img/icon1.svg" alt="">
</li>
<li>
<img class="img" src="img/a_2.png" alt="">
<img class="icon" src="img/icon2.svg" alt="">
</li>
<li>
<img class="img" src="img/a_3.png" alt="">
<img class="icon" src="img/icon3.svg" alt="">
</li>
<li>
<img class="img" src="img/a_4.png" alt="">
<img class="icon" src="img/icon4.svg" alt="">
</li>
</ul>
</div>
</body>
</html>
问题描述：
请问这个做法可以吗，跟老师的相比，哪种方法更好，请老师详细说下
1回答
-
好帮手慕星星
2021-02-18
同学你好，这种做法是可以的，与老师的写法都是常用的。
对于是否用伪类还是要看是否需要获取元素，如果获取元素，那么在js中伪类是获取不到的，就需要通过同学写的这种方式来实现，如果不需要获取元素，那么使用哪种方式都是可以的。关于js，后面的课程会讲解到，这里先了解一下。
祝学习愉快！
1
