银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 23|回复: 4

[原创] 【聊代码】第一0八集:css样式(之七十四)

[复制链接]
发表于 6 天前 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
[i=s] 本帖最后由 海特行者 于 2019-1-10 13:25 编辑 [/i]

 

聊代码(第一0八集)css样式(之七十四)

       前两集,我们分别展示了jpg图片遮罩和颜色遮罩,这两种遮罩一般情况下是离不开设置透明度的,适当的设置透明度,其目的是使底层图产生朦胧感。本集,展示的是png透明图片遮罩,png图片是透明抠图,它会产生半遮半露的效果,同样具有似露非露,余味无穷的美感。请看下图。

 

 
福 满 庭 院

 

       代码:

<style type="text/css">#底层图片
{
position: absolute;绝对定位
z-index:1;图层叠放顺序
top:850px;底层图片定位
left:460px;底层图片定位
width:640px;
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:-20px;遮罩层定位
left:20px;遮罩层定位
width:644px;
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:30px;文字移动范围
z-index:3;
color:#fff; font-size: 45pt;文字的颜色、大小
opacity:1;透明度
}
</style>
<div id="底层图片"> </div>
<div id="遮罩层">
<div id="文字"><marquee behavior="alternate" scrollamount="5" ><b>福 满 庭 院</b> </marquee></div>
</div>

 

       代码解析:

       代码中作了注释,不另赘述。

评分

参与人数 3老年币 +15 收起 理由
九头牛 + 5 才华横溢!很给力!
蓝色欣月 + 5 才华横溢!
静竹 + 5 很给力!

查看全部评分

发表于 6 天前 | 显示全部楼层
欣赏学习老师的【聊代码】第一0八集:css样式(之七十四)!
发表于 6 天前 | 显示全部楼层
谢谢老师辛苦授教!下午好。
发表于 6 天前 | 显示全部楼层
海特老师下午好,又看到你的新作发表,进来支持学习,祝老师新春愉快~!
发表于 6 天前 | 显示全部楼层


您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

QQ|银龄网 ( 苏ICP备16036262号-5 )|网站地图

GMT+8, 2019-1-16 12:00 , Processed in 0.085461 second(s), 29 queries , Gzip On.

快速回复 返回顶部 返回列表