老师请检查
来源：2-13 编程练习
weixin_慕婉清5222614
2021-10-09 11:29:04
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
* {
margin: 0;
padding: 0;
}
.contain {
width: 300px;
height: 200px;
background-color: red;
margin: 50px auto;
position: relative;
}
.star {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid yellow;
position: absolute;
top: 30px;
left: 20px;
}
.star::after {
display: block;
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid yellow;
position: absolute;
top: -10px;
left: -15px;
transform: rotate(-144deg);
}
.star::before {
display: block;
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid yellow;
position: absolute;
top: -10px;
left: -15px;
transform: rotate(-72deg);
}
.star-one {
transform: scale(1.3);
}
.star-two {
transform: scale(0.5) translate(68px, -38px) rotate(23deg);
}
.star-three {
transform: scale(0.5) translate(86px, -7px) rotate(-18deg);
}
.star-four {
transform: scale(0.5) translate(90px, 31px);
}
.star-five {
transform: scale(0.5) translate(65px, 63px) rotate(11deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="contain">
<div class="star star-one"></div>
<div class="star star-two"></div>
<div class="star star-three"></div>
<div class="star star-four"></div>
<div class="star star-five"></div>
</div>
</body>
</html>
1回答
-
同学你好，代码实现效果很不错，继续加油，祝学习愉快！
0
相似问题