老师请问这样做行吗？为啥我的代码老是很多，老师写得代码都很少？这个怎么改正
来源：2-11 过渡效果实战课（3）
weixin_慕码人7523200
2020-11-04 23:44:38
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
margin: 50px auto;
}
.box ul {
list-style: none;
}
.box ul li {
float: left;
width: 102px;
height: 102px;
position: relative;
perspective: 400px;
}
.box ul li+li {
margin-top: 50px;
}
.box ul li img {
position: absolute;
width: 100px;
height: 100px;
bottom: 0;
border: 1px solid #000;
border-radius: 50%;
transition: all 1s linear 0s;
}
.box ul li:nth-child(1) img {
transform-origin: 0 50%;
}
.box ul li:nth-child(1):hover img {
transform: rotateY(-180deg);
}
.box ul li:nth-child(2) img {
transform-origin: 100% 50%;
}
.box ul li:nth-child(2):hover img {
transform: rotateY(180deg);
}
.box ul li:nth-child(3) img {
transform-origin: 50% 0;
}
.box ul li:nth-child(3):hover img {
transform: rotateX(180deg);
}
.box ul li::before {
content: "";
display: block;
background-image: url(../images/cat.jpg);
background-size: 100px 100px;
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../images/dog.jpg" alt=""></li>
<li><img src="../images/dog.jpg" alt=""></li>
<li><img src="../images/dog.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，代码正确。老师能用最简的代码实现出效果，是因为老师的工作经验、项目经验非常丰富，代码书写量很惊人，所以才能做到这些。同学刚接触代码，只要能独立实现出来就很棒，随着代码量越来越多、练习越来愈多，接触的内容越来越多，同学也可以用最少的代码来实现功能了，不要急。同学在练习中，可以特意的去优化自己的代码，当然该点需要建立在知识点娴熟的基础上，即强化知识点、多做练习、多思考才能写出最优的代码。
祝学习愉快！
0
相似问题