银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 147|回复: 16

[原创] 【聊代码】第四十六集:css样式(之十二)

[复制链接]
发表于 2018-8-28 23:33:03 | 显示全部楼层 |阅读模式

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

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

x
[i=s] 本帖最后由 海特行者 于 2018-8-28 23:49 编辑 [/i]

聊代码(第四十六集)css样式(之十二)

 

       应遥望远朋友的要求,对她制作的多色流光字改为单一白色的流光字,请见下图。

 

海特老師辛苦了謝謝!

 

       代码:

<p><img src="https://www.oldkids.cn/upload/2018/05/22/blog_
20180522225051641.jpg" style="width: 600px; height: 324px;" />
<style type="text/css">body{ text-align: center; }
.流光字{ width: 500px; height: 200px; position: absolute; left: 36%; margin-left: 30px; margin-top: -90px;background-image: -webkit-linear-gradient(left,#fff,#fff 10%,#fff 20%,#fff 30%, #fFF 40%, #FFF 50%,#fFF 60%,#fff 70%,#fFF 80%,#FFF 90%,#000 100%); -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */ -webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */ -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite; font-size: 35px; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
</style>
<p class="流光字">海特老師辛苦了謝謝!</p> </p>

 

       关于修改代码的说明:

       首先要说明的是,白色的字必须有背景色相衬,才能显示出文字来。为此,遥望远朋友加了一个暗色图片,非常好。但所加图片不是背景图片,文字是放不上去的,所以,她是用定位代码把文字放到图片上去的(关于定位代码我们以后专门讨论)。
       所谓流光,就是色变。不同颜色的连续更替或是属于同色而浓淡的变化,都会产生流光效果。流光分为多色流光和单色流光。遥望远朋友想制作一个只有白色的单色流光,就是上图效果。
       要把原来的多色流光改为白色流光,方法是:把代码中的11个颜色前10个都设置为白色,最后一个设置为黑色即可。请仔细看上面的代码,你会发现有10个 #FFF ,1个 #000 。除了起始的一个之外,每个颜色值后面都有个百分数,而且不同,依次渐大。这就是相同颜色浓淡不同的原因,也因此产生了流光效果。

       顺便说一下,十六进制的颜色代码是可以简写的。方法:三对字母中,每对中取一个。例如:#ffffff 简写为 #fFF ,#000000 简写为 #000 ,#00ff00 简写为 #0f0 。

 

 

评分

参与人数 5老年币 +25 收起 理由
擎天一柱 + 5 很给力!
蓝色欣月 + 5 赞一个!
延缘缘 + 5 赞一个!
静竹 + 5 很给力!
遥望远 + 5 才华横溢!

查看全部评分

发表于 2018-8-29 05:04:37 | 显示全部楼层
我回帖点赞你 你回帖支持我 和谐互动快乐多

评分

参与人数 2老年币 +10 收起 理由
静竹 + 5 很给力!
遥望远 + 5 很给力!

查看全部评分

发表于 2018-8-29 13:12:58 | 显示全部楼层
我是想把字做成彩色的,把光做成白色的。
看了老师的这篇帖子,才知道是我理解错了,我以为字和光是
分开的两部分。

本想把流光字放在黑色背景上,可又写不来代码,无奈才用了张底图。


老师在帖子里还普及了一些基础知识,颜色代码可以简写。





本帖子中包含更多资源

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

x
发表于 2018-8-29 13:16:08 | 显示全部楼层
本帖最后由 遥望远 于 2018-8-29 14:40 编辑

我把这帖删了吧,影响老师一楼的效果。摆个复制件在下一楼。
发表于 2018-8-29 13:21:17 | 显示全部楼层
本帖最后由 遥望远 于 2018-8-29 13:39 编辑

很奇怪,我在四楼用了红色,老师一楼也跟着变成红色了(本来是黑色)。

本帖子中包含更多资源

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

x

评分

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

查看全部评分

发表于 2018-8-29 18:27:20 | 显示全部楼层
谢谢老师辛苦!学习了。
发表于 2018-8-29 18:39:42 | 显示全部楼层

海特老師辛苦了謝謝!






 楼主| 发表于 2018-8-29 21:21:03 | 显示全部楼层
遥望远 发表于 2018-8-29 13:16
本帖最后由 遥望远 于 2018-8-29 14:40 编辑 我把这帖删了吧,影响老师一楼的效果。摆个复制件在下一楼。
...

改不改,无所谓的。你所说的是正常现象,css样式有这个特点,在这个页面上,浏览器会自动改变选择,它要选择最后出现的属性设置。你既使把你那个图删去,我的帖子还会选择后面静竹的设置,她也是用了红色,只有静竹把红改黑,我的帖子才能复原貌。

评分

参与人数 2老年币 +10 收起 理由
遥望远 + 5 很给力!
静竹 + 5 很给力!

查看全部评分

发表于 2018-8-30 09:29:02 | 显示全部楼层

海特老師辛苦了謝謝!






发表于 2018-8-30 09:44:56 | 显示全部楼层

老师上午好,欣赏您的精彩主题佳作,祝秋祺温馨快乐!

评分

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

查看全部评分

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

本版积分规则

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

GMT+8, 2019-2-16 09:54 , Processed in 0.111799 second(s), 29 queries , Gzip On.

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