银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 139|回复: 12

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

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

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

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

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

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

 

       我们在前两集聊了class选择器,这是最常用的选择器,我们必须掌握。除了这个以外,还有id选择器、元素选择器、属性选择器等多种选择器。我以为这些选择器不常见,也不重要,不是非会不可的,不用它们,完全能做出我们想要做的东西来。因为这个,剩下的选择器我们就不讨论了。同样的意思,插入css样式的第三个方式css外部样式表我们也不讨论。css外部样式表对代码不甚熟悉的朋友学习会感觉难度很大,重要的是,对于我们在代码方面的“平民百姓”,你既使是会它懂它,恐怕也没机会用它。对于我们初学代码的人,最好是一看就明白,立竿见影,能照着猫咪画出老虎来,最好。
       本集,我们就利用css样式搞几种漂亮的标题文字,请看效果。

 

海特行者欢迎你(线影字)

海特行者欢迎你(双线字)

海特行者欢迎你(断笔字)

海特行者欢迎你(立体字)

海特行者欢迎你(阴影字)

海特行者欢迎你(倒影字)

 

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

 

 

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

 

       代码:

<style type="text/css">body{ text-align: center; }
.第一种字{ background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAI
AAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q
2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit-text-fill-color: transparent; -webkit-background-clip: text }
.第二种字{ color: transparent; -webkit-text-stroke: 1px red; letter-spacing: 0.04em;}
.第三种字{ color: transparent; background-color : blue; text-shadow : rgba(255,255,255,15) 0.5px 6px, rgba(255,255,255,0.2) 1px 3px 3px; -webkit-background-clip : text; }
.第四种字{ color: gold; letter-spacing: 0; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
.第五种字{ font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink }
.第六种字{ color: #0f0; -webkit-box-reflect:below 0px; }
.第七种字{ 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>
<h1 class="第一种字">海特行者欢迎你(线影字)</h1>
<h1 class="第二种字">海特行者欢迎你(双线字)</h1>
<h1 class="第三种字">海特行者欢迎你(断笔字)</h1>
<h1 class="第四种字">海特行者欢迎你(立体字)</h1>
<h1 class="第五种字">海特行者欢迎你(阴影字)</h1>
<h1 class="第六种字">海特行者欢迎你(倒影字)</h1>
<p> </p>
<p> </p>
<p class="第七种字">海特行者欢迎你(流光字)</p>
<p> </p>
<style type="text/css">.blink{ 0%{opacity: 1;} 50%{opacity: 1;} 50.01%{opacity: 0;} 100%{opacity: 0;} } @-webkit-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 .80s linear infinite; -webkit-animation: blink .80s linear infinite; -moz-animation: blink .80s linear infinite; -ms-animation: blink .80s linear infinite; -o-animation: blink .80s linear infinite; color: #00f; }
</style>
<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>
<p> </p>
<h1 class="blink">海特行者欢迎你(闪烁字)></h1>
<p> </p>

 

把标题文字放在背景图上

评分

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

查看全部评分

发表于 2018-8-25 09:45:12 | 显示全部楼层
谢谢老师辛苦!跟老师学代码。
发表于 2018-8-25 09:45:46 | 显示全部楼层
迟复致歉!周末快乐。
发表于 2018-8-25 10:27:25 | 显示全部楼层

本帖子中包含更多资源

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

x
发表于 2018-8-25 10:53:10 | 显示全部楼层

发表于 2018-8-25 14:21:19 | 显示全部楼层
海特老师下午好,辛苦啦,祝周未愉快~!
发表于 2018-8-25 21:03:43 | 显示全部楼层
老师辛苦了!
我想学写第七种字(流光字),可我找的代码都不对,请老师
把这段代码单列出来,我才能“照猫画虎”,谢谢老师!


发表于 2018-8-26 20:20:40 | 显示全部楼层
老师辛苦了!

我试着学做第七种字(流光字),可我找的代码都不对,请老师

把这段代码单列出来,我才能“照猫画虎”,谢谢老师!

本帖子中包含更多资源

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

x
 楼主| 发表于 2018-8-26 21:45:28 | 显示全部楼层
遥望远 发表于 2018-8-26 20:20
老师辛苦了!
我试着学做第七种字(流光字),可我找的代码都不对,请老师
把这段代码单列出来,我才能“ ...

请看第四十三集,给你准备好了。

评分

参与人数 1老年币 +5 收起 理由
遥望远 + 5 情真意切!

查看全部评分

发表于 2018-8-27 20:16:35 | 显示全部楼层
海特行者 发表于 2018-8-26 21:45
请看第四十三集,给你准备好了。

老师太好了,谢谢哟!
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2019-2-22 12:30 , Processed in 0.158542 second(s), 29 queries , Gzip On.

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