这样写合法吗
来源：2-13 编程练习
派大兴兴
2021-11-06 16:40:16
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.bg{
width:300px;
height:200px;
background:red;
position:relative;
perspective:300px;
}
.bg div{
float:left;
color:yellow;
font-size:18px;
padding-left:10px;
padding-top:10px;
}
.bg div:nth-child(1){
color:yellow;
font-size:50px;
}
.bg div:nth-child(2){
transform:rotate(90deg) translate(-5px,-20px);;
}
.bg div:nth-child(3){
transform:rotate(45deg) translate(15px) ;
}
.bg div:nth-child(4){
transform:translate(-20px,40px);
}
.bg div:nth-child(5){
transform:rotate(90deg) translate(60px,60px);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="bg">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</body>
</html>1回答
-
同学你好，这么写效果是对的，但是没有起到练习的作用，我们的练习是想让同学通过拼接标签来实现五角星的。
可参考如下实现：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
.flag {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 900px;
height: 600px;
margin: auto;
background: red;
}
/* 拼接五角星 */
.star {
position: absolute;
width: 0;
height: 0;
border-top: none;
border-right: 30px solid transparent;
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
}
.star:before {
position: absolute;
top: 65px;
left: -100px;
width: 0;
height: 0;
content: '';
transform: rotate(35deg);
border-top: none;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
}
.star:after {
position: absolute;
top: 65px;
left: -100px;
width: 0;
height: 0;
content: '';
transform: rotate(-35deg);
border-top: none;
border-right: 100px solid transparent;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
}
/* 以下就是通过，移动旋转缩放调整五角星的位置*/
.star0 {
transform: translate(120px, 55px) scale(.88);
}
.star1 {
transform: rotate(-50deg) translate(155px, 200px) scale(.3);
}
.star2 {
transform: rotate(-25deg) translate(265px, 195px) scale(.3);
}
.star3 {
transform: rotate(0deg) translate(330px, 150px) scale(.3);
}
.star4 {
transform: rotate(20deg) translate(330px, 105px) scale(.3);
}
</style>
</head>
<body>
<div class="flag">
<div class="star star0"></div>
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
</div>
</body>
</html>
祝学习愉快~
0
相似问题