老师，怎样搞多朵云出来
来源：2-14 项目作业
陈孝芳
2019-11-12 18:39:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>homework4</title>
<style type="text/css">
.sky{
width: 100%;
height: 480px;
background:linear-gradient(rgb(196, 228, 253) 0%,#fff 100%);
position: relative;
}
.grass{
width:100%;
height:222px;
background:linear-gradient(#fff 0%,rgb(148,190,89) 100%);
}
.sky > .cloud1{
width:30px;
height:30px;
border-radius:50px 50px 40px 40px;
background:#fff;
position:relative;
top:50px;
left:100px;
}
.sky > .cloud2{
width: 30px;
height: 50px;
border-radius: 90px 70px 70px 90px;
background: #fff;
position: relative;
top: 9px;
left: 114px;
transform: rotate(-17deg);
}
.sky > .cloud3{
width: 60px;
height: 70px;
border-radius: 111px 93px 68px 127px;
background: #fff;
position: relative;
top: -62px;
left: 130px;
transform: rotate(-5deg);
}
.sky > .cloud4{
width: 50px;
height: 50px;
border-radius: 50px 50px 40px 40px;
background: #fff;
position: relative;
top: -117px;
left: 168px;
}
</style>
</head>
<body>
<div class="sky">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
</div>
</div>
<div class="grass"></div>
</body>
</html>
1回答
-
好帮手慕码
2019-11-12
同学你好，再复制一次就出现了多朵云，效果：
但是这样布局效果太繁琐，建议通过before和after去实现：
（1） 先用div写一个基础的形状
（2） 用:before伪元素生成一个形状
（3） 再用:after伪元素生成一个形状
（4） 在每个生产的元素中将样式调整一下，比如旋转的角度，和它的圆角边框
这样，写4~5个div即可。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题