老师，请问我第五个云朵怎么有一部分显示不了？
来源：2-14 项目作业
慕勒8522502
2019-06-24 13:59:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rabbit</title>
<style>
*{margin:0; padding:0;}
body{
width:100%;
height:700px;
}
/*天空*/
.sky{
height:60%;
background: -webkit-linear-gradient(180deg, rgb(196, 228, 253), transparent);
background: -moz-linear-gradient(180deg, rgb(196, 228, 253), transparent);
background: -o-linear-gradient(180deg, rgb(196, 228, 253), transparent);
background: linear-gradient(180deg, rgb(196, 228, 253), transparent);
}
/*天空的云朵*/
.clouds{
width:70px;
height:70px;
background-color: #FFFFFF;
border-radius:60%;
position:relative;
transform:translate(100px,0);
}
.clouds:before{
display:block;
content:'';
width:120px;
height:30px;
background-color: #FFFFFF;
border-radius:20px / 20px 20px;
position:absolute;
transform:translate(-40px,-40px);
}
.clouds:after{
content: '';
width: 60px;
height: 30px;
background-color: #FFFFFF;
border-radius: 20px / 20px 20px;
position: absolute;
left: -30px;
top: 30px;
transform: rotate(70deg);
}
/*草地*/
.grass{
height:40%;
background: -webkit-linear-gradient(0deg, rgb(148, 190, 89), transparent);
background: -moz-linear-gradient(0deg, rgb(148, 190, 89), transparent);
background: -o-linear-gradient(0deg, rgb(148, 190, 89), transparent);
background: linear-gradient(0deg, rgb(148, 190, 89), transparent);
}
</style>
</head>
<body>
<!-- 天空 -->
<div class="sky">
<div class="cloud1 clouds"></div>
<div class="cloud2 clouds"></div>
<div class="cloud3 clouds"></div>
<div class="cloud4 clouds"></div>
<div class="cloud5 clouds"></div>
</div>
<!-- 草地 -->
<div class="grass">
<!-- <img src="rabbit.png" > -->
</div>
</body>
</html>写回答
1回答
-
你好同学，显示不了是因为横轴的图形位置不对，如下：
每一个云朵的横轴图形都跑到它上面的云朵中，依次类推，到第五个云朵，它下面没有云朵了，所以形状不对
修改一下位置就可以了，如下：
祝学习愉快，望采纳。
0
相似问题