请看下面的一段文字，利用css样式表的多个声明，可以对文本当中任意位置的文字定义各种不同的属性，呈现不同的字体，字色，字大小，还可以作闪动，流光等艺术处理，这在一些文本中，尤其象我的【聊代码】、【聊音画】等这类帖子，常常需要让某些词句醒目一些，或突出一些，这就要变化文字。可见，我在这里列举了这些代码实例还是有的放矢的，希望朋友们能够掌握它，举一反三，还会有不少花样呢！ 红色的闪烁字有边框线有背景色的红色字粉色斜体字有背景色的蓝色字加大了间距的绿色字流光字 代码： ＜style type="text/css"＞
@keyframes 闪{ 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.闪{ animation: blink .70s linear infinite;color: #f00;font-size:30px; }
.红 {color:red; background:yellow;border:3px solid #0f0; font-size:20px;color:#f00 }
.粉 {font-style:oblique; font-size:30px;color:#f0f }
.蓝 {background-color:#ffc20e; font-size:30px;color:#00f }
.绿 { letter-spacing:0.3em; font-size:30px;color:#0f0 }
＜/style＞
＜p align="left"＞＜span class="闪">闪动的红色字＜/span＞＜span class="红"＞有边框线有背景色的红色字＜/span＞＜span class="粉"＞粉色斜体字＜/span＞＜span class="蓝"＞有背景色的蓝色字＜/span＞＜span class="绿"＞加大了间距的绿色字＜/span＞＜span class="text"＞流光字＜/span＞＜/p＞
＜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＞ |
