关于不同透明度的云朵叠加后产生的效果
来源：2-14 项目作业
键盘f11
2020-05-17 13:26:54
<!DOCTYPE html>
<html>
<head>
<title>tuzi</title>
<link rel="stylesheet" type="text/css" href="css/tuzi.css">
</head>
<body>
<div class="zong">
<div class="tian">
<div class="yun1"></div>
<div class="yun2"></div>
<div class="yun3"></div>
<div class="yun4"></div>
<div class="yun5"></div>
</div>
<div class="caodi">
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.zong{
width: 100%;
height: 610px;
margin: 0 auto;
}
.tian{
width: 100%;
height: 60%;
background:linear-gradient(180deg, rgb(196, 228, 253) 0%, white 100%);
position: relative;
}
.caodi{
width: 100%;
height: 40%;
background: linear-gradient(0deg, rgb(148, 190, 89) 0% , white 100%);
}
.yun1, .yun2, .yun3,.yun4,.yun5{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
box-shadow: #fff 24px -14px 0 -3px, #fff 64px -12px 0 10px, #fff 30px 10px, #fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
position: absolute;
}
.yun1{
opacity: 0.7;
left: 600px;
top: 150px;
animation: yunq var(--t) linear infinite;
}
:root{
--cloud:#fff;
--t:10s;
}
.yun2{
opacity: 0.8;
left: 530px;
top: 50px;
}
.yun3{
left: 155px;
top: 131px;
}
.yun4{
opacity: 0.9;
left: 230px;
top: 60px;
}
.yun5{
left: 260px;
top: 180px;
}
@keyframes yunq{
0%{
left:100%;
}
100%{
left: -100%;
}
}
您好，老师，上述为我写的代码，针对于白云这几个div元素，有个问题想要咨询一下：根据作业中的要求，分别对不同位置的云朵设置不同的透明度（利用opacity属性，最大值为1，最小值为0），那动画效果中会有一段内容出现两块云朵叠加了，出现了重叠的部分。假设这两块云朵的opacity数值分别为0.5和0.6 ，重叠部分的取值是如何计算的呢？根据系统默认的z-index属性？还是根据透明度的大小。重叠部分就是现实opacity数值为0.6的效果。那如何用程序代码实现，重叠部分的内容效果叠加呢？（透明度分别为0.5和0.6 ，叠加后的透明度理论上应该是大于0.6，但是小于1 ？），那这个效果如何去实现呢？代码实现上会不会很复杂？有没有必要这样子去尝试呢？或者说有没有实现的可能？找到动画效果中某个时间点，这块区域重叠了，设置这个重叠部分的透明度opacity:0.8？
1回答
-
好帮手慕星星
2020-05-17
同学你好，两朵白云是独立的div元素，只是在运动过程中某一时刻重叠了，自身透明度不会改变，浏览器也不会去计算重叠这部分的透明度。所以不需要考虑重叠时候的透明度是多少，也不需要考虑这一时刻的设置多少透明度。
祝学习愉快！
0
相似问题