银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 23|回复: 6

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

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

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

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

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

 

聊代码(第一0九集)css样式(之七十五)

       首先制作一个描边文字,然后截图,使之成为图片再进行抠图,抠出来的图片保存为透明png图片,用这样的静态png透明抠图作遮罩层,遮罩在动态的gif底层图片上,这就是本集要展示的遮罩效果。请看下图。

 

 
海特行者欢迎你!

 

 

 

 

 

       代码:

<style type="text/css">#底层图片
{
position: absolute;绝对定位
z-index:1;图层叠放顺序
top:820px;底层图片定位
left:460px;底层图片定位
width:640px;
height:430px;
border:5px #f0f 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:10px;遮罩层定位
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:260px;文字定位
left:0px;文字定位
width:450px;文字移动范围
height:30px;文字移动范围
z-index:3;
color:yellow; font-size: 30pt;文字的颜色、大小
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 天前 | 显示全部楼层

欣赏老师的精彩主题佳作,祝周未温馨快乐!

评分

参与人数 1老年币 +5 收起 理由
静竹 + 5 很给力!

查看全部评分

发表于 6 天前 | 显示全部楼层
欣赏学习老师的【聊代码】第一0九集:css样式(之七十五)!
发表于 6 天前 | 显示全部楼层
用图片镂空做文字遮罩,也不错。好注意!学习了。
 楼主| 发表于 6 天前 | 显示全部楼层
静竹 发表于 2019-1-11 09:30
用图片镂空做文字遮罩,也不错。好注意!学习了。

还有另一种方法,即在背景颜色上放上文字,然后把文字抠掉,这个作遮罩效果也很好。
 楼主| 发表于 6 天前 | 显示全部楼层
延缘缘 发表于 2019-1-11 08:20
欣赏老师的精彩主题佳作,祝周未温馨快乐!

缘缘好,欢迎你!
发表于 6 天前 | 显示全部楼层
进来欣赏海特老师的佳作,下午好~!
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2019-1-17 23:25 , Processed in 0.077024 second(s), 28 queries , Gzip On.

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