银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 80|回复: 9

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

[复制链接]
发表于 2018-8-26 17:29:32 | 显示全部楼层 |阅读模式

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

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

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

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

 

       请看下面的一段文字,利用css样式表的多个声明,可以对文本当中任意位置的文字定义各种不同的属性,呈现不同的字体,字色,字大小,还可以作闪动,流光等艺术处理,这在一些文本中,尤其象我的【聊代码】、【聊音画】等这类帖子,常常需要让某些词句醒目一些,或突出一些,这就要变化文字。可见,我在这里列举了这些代码实例还是有的放矢的,希望朋友们能够掌握它,举一反三,还会有不少花样呢!

 

 

闪动的红色字有边框线有背景色的红色字粉色斜体字有背景色的蓝色字加大了间距的绿色字流光字

 

       代码:

<style type="text/css">
span.红 {color:red; background:yellow;border:3px solid #0f0; font-size:20px;color:#f00 }
span.粉 {font-style:italic; font-size:30px;color:#f0f }
span.蓝 {background-color:#ffc20e; font-size:30px;color:#00f }
span.绿 { letter-spacing:0.3em; font-size:30px;color:#0f0 }
</style>
<p align="left"><span class="blink">闪动的红色字</span><span class="红">有边框线有背景色的红色字</span><span class="粉">粉色斜体字</span><span class="蓝">有背景色的蓝色字</span><span class="绿">普通的绿色字</span><span class="text">流光字</span></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;font-size:30px; }
</style>
<div class="text">
<style type="text/css">body{ text-align: center; }
.vintage1{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECA
IAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO
0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit-text-fill-color: transparent; -webkit-background-clip: text }
.vintage2{ color: transparent; -webkit-text-stroke: 1px red; letter-spacing: 0.04em;}
.vintage3 { color: transparent; background-color : blue; text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px; -webkit-background-clip : text; }
.vintage4{ 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 }
.vintage5{ font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink }
.text-reflect-base{ color: palegreen;
-webkit-box-reflect:below 10px; }
.text{ width: 200px; height: 50px; position: absolute; 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>
</div>

 

评分

参与人数 5老年币 +25 收起 理由
擎天一柱 + 5 赞一个!
蓝色欣月 + 5 赞一个!
静竹 + 5 很给力!
九头牛 + 5 很给力!
糊里糊涂 + 5 才华横溢!

查看全部评分

发表于 2018-8-26 19:42:26 | 显示全部楼层
海特老师晚上好,新代码佳作又发表了,辛苦啦~!

评分

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

查看全部评分

 楼主| 发表于 2018-8-27 00:45:21 | 显示全部楼层
蓝色欣月 发表于 2018-8-26 19:42
海特老师晚上好,新代码佳作又发表了,辛苦啦~!

欣月好,欢迎你!

评分

参与人数 2老年币 +10 收起 理由
蓝色欣月 + 5 很给力!
静竹 + 5 很给力!

查看全部评分

发表于 2018-8-27 05:00:22 | 显示全部楼层
谢谢朋友,学习欣赏支持!

评分

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

查看全部评分

发表于 2018-8-27 09:58:41 | 显示全部楼层

评分

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

查看全部评分

发表于 2018-8-27 10:28:26 | 显示全部楼层


评分

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

查看全部评分

发表于 2018-8-27 11:18:46 | 显示全部楼层
欣赏学习老师的代码!
发表于 2018-8-27 11:19:01 | 显示全部楼层
老师辛苦了!新周快乐。
发表于 2018-8-27 13:58:44 | 显示全部楼层

海特老师下午好,谢谢你的回复,祝老师新周开心快乐~!
发表于 2018-10-3 19:22:13 | 显示全部楼层


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

本版积分规则

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

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

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