老师 帮忙看下有没有要修改的地方
来源：2-13 编程练习
lcy_18
2021-03-05 14:34:45
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
padding: 0;
margin: 0;
}
.stars{
width: 600px;
height: 400px;
background-color: #FF0000;
margin: 0 auto;
position: relative;
}
.star,.star::before,.star::after{
width: 0;
height: 0;
border: 60px solid transparent;
border-top: 40px solid yellow;
position: absolute;
}
.star::before,.star::after{
display: block;
content: " ";
}
.star::before{
transform: rotate(73deg);
top: -64px;
left: -89px;
}
.star::after{
transform: rotate(-73deg);
top: -64px;
left: -30px;
}
.star1{
transform: scale(0.8);
top: 70px;
left: 35px;
}
.star2{
transform: scale(0.3) rotate(28deg);
top: -4px;
left: 110px;
}
.star3{
transform: scale(0.3) rotate(50deg);
top: 30px;
left: 130px;
}
.star4{
transform: scale(0.3) rotate(65deg);
top: 75px;
left: 130px;
}
.star5{
transform: scale(0.3) rotate(28deg);
top: 120px;
left: 110px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="stars">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
</div>
</body>
</html>
1回答
-
同学你好，代码实现效果是正确的，也没有需要修改的地方了，非常棒，继续加油，祝学习愉快！
0
相似问题