银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 140|回复: 17

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

[复制链接]
发表于 2018-8-25 22:57:21 | 显示全部楼层 |阅读模式

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

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

x
[i=s] 本帖最后由 海特行者 于 2018-8-26 11:19 编辑 [/i]

聊代码(第四十三集)css样式(之九)

 

       考虑遥望远朋友的要求,我也想象得到,会有一部分朋友看不清代码,特别是流光字和闪烁字的代码,比较复杂,看着一大片,确实不易分辨。为此,我把其它六种都删去了,并且把流光字和闪烁字代码分开了,这样就一目了然了。在这里我再提醒一下:如果你不是复制源代码,而是复制我帖子上的代码,一定别忘了改换尖角括号。

 

海特行者欢迎你(流光字)

 

 

 

       流光字代码:

<style type="text/css">body{ text-align: center; }
.流光字{ width: 500px; height: 200px; position: absolute; left: 50%; margin-left: -250px; background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 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>

 

海特行者欢迎你(闪烁字)

 

       闪烁字代码:

<style type="text/css">@keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } .blink{ animation: blink .75s linear infinite; -webkit-animation: blink .75s linear infinite; -moz-animation: blink .75s linear infinite; -ms-animation: blink .75s linear infinite; -o-animation: blink .75s linear infinite; color: #f00; } </style> <h1 class="blink">海特行者欢迎你(闪烁字)</h1>

 

把标题文字放在背景图上

评分

参与人数 6老年币 +30 收起 理由
擎天一柱 + 5 赞一个!
遥望远 + 5 非常实用!
蓝色欣月 + 5 赞一个!
沧海笑 + 5 很给力!
静竹 + 5 很给力!
延缘缘 + 5 很给力!

查看全部评分

发表于 2018-8-26 04:56:14 | 显示全部楼层
谢谢朋友!学习!

评分

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

查看全部评分

发表于 2018-8-26 08:03:08 | 显示全部楼层

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

评分

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

查看全部评分

发表于 2018-8-26 11:35:13 | 显示全部楼层
老师辛苦了!欣赏学习。
发表于 2018-8-26 11:36:50 | 显示全部楼层
本帖最后由 静竹 于 2018-8-26 11:39 编辑


静竹学习(流光字)

  1. <p align="left"><span style="font-size:20px;color:#f00;font-family:仿宋;"><style type=&quot;text/css&quot;&gt;body{ text-align: center; }<br />
  2. .流光字{ width: 500px; height: 200px; position: absolute; left: 50%; margin-left: -250px; background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 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><br />
  3. <p class=&quot;流光字&quot;>静竹学习(流光字)</p></span></p>
复制代码
发表于 2018-8-26 11:40:29 | 显示全部楼层
问老师,怎么回事?
 楼主| 发表于 2018-8-26 13:01:40 | 显示全部楼层
本帖最后由 海特行者 于 2018-8-26 13:04 编辑
静竹 发表于 2018-8-26 11:40
问老师,怎么回事?

代码看似没问题,实则有问题。严格地说,是错码。不过错处不大,就是多了个换行代码/br,因为有它,你才看不到该有的效果。很简单,把它删掉即可。
 楼主| 发表于 2018-8-26 13:08:06 | 显示全部楼层
大圣 发表于 2018-8-26 04:56
谢谢朋友!学习!

欢迎老朋友!
 楼主| 发表于 2018-8-26 13:10:21 | 显示全部楼层
延缘缘 发表于 2018-8-26 08:03
老师上午好,欣赏您的精彩主题佳作,祝秋祺温馨快乐!

欢迎缘缘,谢谢缘缘!
发表于 2018-8-26 13:34:39 | 显示全部楼层

向老师学习!

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

本版积分规则

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

GMT+8, 2019-2-16 10:02 , Processed in 0.072088 second(s), 28 queries , Gzip On.

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