前两集，我们分别展示了jpg图片遮罩和颜色遮罩，这两种遮罩一般情况下是离不开设置透明度的，适当的设置透明度，其目的是使底层图产生朦胧感。本集，展示的是png透明图片遮罩，png图片是透明抠图，它会产生半遮半露的效果，同样具有似露非露，余味无穷的美感。请看下图。
代码：
＜style type="text/css"＞#底层图片{
position: absolute; top:970px; left:370px; 底层图片绝对定位
z-index:1; 图层叠放顺序
width:680px; height:430px;
border:5px yellow solid; 边框线的厚度、颜色、样式
border-radius: 30px; 圆角半径
background-image:url(http://img4.oldkids.cn/upload/260811000/u260810070/
2015/12/20/blog_ 20151220110635143384.gif
);
opacity:1; 透明度
}
#遮罩层{
position:relative; top:-60px; left:150px; 遮罩层相对定位
width:400px; height:430px;
z-index:2; 图层叠放顺序
background-image:url(http://www.oldkids.cn/upload/2019/01/09/blog_
20190109221452604.png );
opacity:1; 透明度
animation: linear mymove 10s infinite;旋转时间
}
@keyframes mymove{ 左右摆动
from {transform:rotate(0deg);}
33% {transform:rotate(20deg);}
66% {transform:rotate(0deg);}
to {transform:rotate(-20deg);}
}
#文字{
position:relative; top:300px; left:0px; 文字相对定位
width:450px; height:50px; 文字移动范围
z-index:3;图层叠放顺序
color:#fff; font-size: 30pt; 文字的颜色、大小
opacity:1; 透明度
}
＜/style＞
＜div id="底层图片"＞ ＜/div＞
＜div id="遮罩层"＞
＜div id="文字"＞＜marquee behavior="alternate" scrollamount="5" ＞＜b＞福 满 庭 院＜/b＞ ＜/marquee＞＜/div＞
＜/div＞
代码解析：
代码中作了注释，不另赘述。
| 
