请老师检查
来源：2-13 编程练习
RockEggs
2022-05-09 22:29:24
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;
}
.flag{
width:300px;
height:200px;
background:red;
position:relative;
}
.star{
position:relative;
}
.star .angle{
width:0;
height:0;
border:4px solid transparent;
border-bottom:12px solid yellow;
transform-origin:4px 16px;
position:absolute;
top:0;
left:0;
}
.star .angle:nth-child(2){
transform:rotate(72deg);
}
.star .angle:nth-child(3){
transform:rotate(144deg);
}
.star .angle:nth-child(4){
transform:rotate(216deg);
}
.star .angle:nth-child(5){
transform:rotate(288deg);
}
.flag .main-star{
top:30px;
left:280px;
transform:scale(2.5);
}
.flag .sub-star{
position:absolute;
}
.flag .sub-star:nth-child(2){
top:10px;
left:120px;
transform:rotate(25deg);
}
.flag .sub-star:nth-child(3){
top:35px;
left:150px;
transform:rotate(45deg);
}
.flag .sub-star:nth-child(4){
top:75px;
left:155px;
transform:rotate(65deg);
}
.flag .sub-star:nth-child(5){
top:105px;
left:135px;
transform:rotate(85deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="star main-star">
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
</div>
<div class="star sub-star">
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
</div>
<div class="star sub-star">
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
</div>
<div class="star sub-star">
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
</div>
<div class="star sub-star">
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
<div class="angle"></div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2022-05-10
同学你好，代码正确，很棒，祝学习愉快！
0
相似问题