老师，如何给不同的云朵设置不同的透明度呢？
来源：2-14 项目作业
慕斯卡0165078
2020-05-14 18:44:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rabbit</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
:root{
--cloud:#fff;
}
.sky{
width:100%;
height:348px;
/* background:red; */
background:linear-gradient(0deg,#fff 0%,rgb(196, 228, 253) 100%);
position: relative;
}
.grass{
width:100%;
height:232px;
background:linear-gradient(0deg,rgb(148, 190, 89) 0%,#fff 100%);
}
.cloud{
width:170px;
height:50px;
border-radius:70px;
background:var(--cloud);
position: absolute;
top:100px;
left:200px;
}
.cloud:before{
content:'';
width:90px;
height:60px;
border-radius:50px;
background:var(--cloud);
position: absolute;
transform: rotate(60deg);;
top:-10px;
left:8px;
}
.cloud:after{
content:'';
width:100px;
height:100px;
border-radius:50%;
background:var(--cloud);
position: absolute;
top:-41px;
left:56px;
}
.cloud.two{
transform:translate(340px,-40px) scale(.6,.6);
}
.cloud.three{
transform:translate(400px,15px) scale(.8,.8);
}
.cloud.four{
transform:translate(600px,-70px) scale(.5,.5);
/* background-color:rgb(255, 255, 255,.5); */
}
.cloud.five{
transform:translate(780px,50px) scale(.9,.9);
}
</style>
</head>
<body>
<!-- 天空 -->
<div class="sky">
<!-- 五个云朵 -->
<div class="cloud"></div>
<div class="cloud two"></div>
<div class="cloud three"></div>
<div class="cloud four"></div>
<div class="cloud five"></div>
</div>
<!-- 草地 -->
<div class="grass"></div>
</body>
</html>
1回答
-
同学你好，参考如下设置不同的透明度：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题