1. Demand
Study the effect of transparent overlays and the impact of zoom.
2. Source code
<!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>3. Summary
The overlay of opacity can be regarded as the percentage calculation overlay of the three RGB colors.
The effect of zoom affects children, so divs can be used as combinations.