课程信息
课程名称：前端工程师
课程章节：第三周 绘制五星红旗
课程讲师：
课程内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五星红旗</title>
<style type="text/css">
/* 此处写代码*/
* {
padding: 0;
margin: 0;
}
.flag {
width: 300px;
height: 200px;
background-color: rgb(218, 37, 29);
position: relative;
margin: auto;
}
.flag .star {
position: absolute;
left: 30px;
top: 50px;
border: 30px solid transparent;
border-top: 20px solid yellow;
}
.flag .star::before {
left: -44px;
top: -30px;
content: "";
position: absolute;
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(70deg);
}
.flag .star::after {
content: "";
position: absolute;
left: -18px;
top: -30px;
border: 30px solid transparent;
border-top: 20px solid yellow;
transform: rotate(292deg);
}
.flag .one {
transform: scale(1);
}
.flag .two {
left: 80px;
top: 10px;
transform: rotate(25deg) scale(0.4);
}
.flag .three {
left: 100px;
top: 30px;
transform: rotate(45deg) scale(0.4);
}
.flag .four {
left: 100px;
top: 60px;
transform: rotate(65deg) scale(0.4);
}
.flag .five {
left: 80px;
top: 80px;
transform: rotate(85deg) scale(0.4);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="star one"></div>
<div class="star two"></div>
<div class="star three"></div>
<div class="star four"></div>
<div class="star five"></div>
</div>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
