聊代码（第四十四集）css样式（之十四）

前两集说的是流光字，属于特效字，这在用Flash软件制作中称为渐变，都指的是元素颜色逐渐变化，是一回事。我这里要说的是，用Flash软件制作是很复杂的，比较而言，用代码制作要容易得多。本集，我们把流光字代码稍作变化（加一个 -webkit-text-stroke: 1px #0f0; 使它变成描边字，再加一个 font-weight: bold; 使笔划变粗），就变成了描边流光字，请看下图效果。

海特行者欢迎你！

代码：

＜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: 0px; 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-text-stroke: 1px #0f0; -webkit-background-clip: text;

-webkit-background-size: 200% 100%;

-webkit-animation: 流光 4s linear infinite; font-size: 50px; font-weight: bold;}

@keyframes 流光 { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }

＜/style＞

＜p class="描边字"＞海特行者欢迎你！＜/p＞

＜/p＞

代码解析：

width: 500px; height: 200px; position: absolute; left: 36%; margin-left: -50px; 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-text-stroke: 1px #0f0; 描边的边线宽和颜色。

-webkit-background-clip: text; 指定元素背景所在区域。text表示元素背景在前景内容（文字）中。

-webkit-background-size: 200% 100%; 使背景图片水平方向扩大一倍，从而保证有元素移动或变化的空间。

-webkit-animation: masked-animation 5s linear infinite; font-size: 50px; 光移速度，文字大小。

在样式表的最后，有这样一组代码：@keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } 其中， keyframes 就是用于创建动画的。当它规定了某个css样式，就能创建元素从一种样式逐渐变化为另一种样式的动画效果。它是用百分比规定变化发生时间的（或用“from”和“ to ”，这等同于 0% 和 100% ）。0% 是动画的开始， 100% 是动画的结束。 animation 设置动画，通过 position 的变化，达到动画效果。

海 特 行 者 欢 迎 你 ！