一、需求
研究透明叠加的效果以及zoom放大的影响。
二、源码
<!DOCTYPE html>
<html>
<head>
<title>animation</title>
</head>
<body>
<!--<div class="dest-line"></div>-->
<div class="background">
<div class="block"></div>
<div class="block2"></div>
</div>
</body>
</html>
<style>
.background{
left: 0px;
top: 0px;
width: 320px;
height: 320px;
margin: 0px;
padding: 0px;
opacity: 1;
zoom:1.5;
border-radius: 0px;
border-width: 0px;
background-color: black;
}
.block{
position: absolute;
left: 80px;
top: 80px;
width: 160px;
height: 160px;
margin: 0px;
padding: 0px;
opacity: 0.5;
border-radius: 0px;
border-width: 0px;
background-color: red;
}
.block2{
position:absolute;
left: 160px;
top: 80px;
width: 160px;
height: 160px;
margin: 0px;
padding: 0px;
opacity: 0.5;
border-radius: 0px;
border-width: 0px;
background-color: green;
}
</style>三、总结
opacity的叠加可视为rgb三色的百分比计算叠加。
zoom的效果影响children，因此可将div视作组合来使用。