css3渐变色字体

\3cspan id="mce_marker" data-mce-type="bookmark">\3c/span>\3cspan id="__caret">_\3c/span>\3c!--
.text-nav { width: 100%; height: 100% }
.computer { background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: 5s linear infinite computer }
@keyframes computer { 0% { background-position: left top } 100% { background-position: -100% 0 } }
.foontl { margin-left: 180px }

彩色渐变字体

　　　也就是所谓的c3动画，用 @keyframes 定义一个动画效果，然后添加到字体上，从0%开始定义状态到100%，规定动画时间，改变速度跟无限循环；背景颜色如下:

　　　　

     　　　　 background: -webkit-linear-gradient(left,#ffffff,#ff0000,#ff7d00,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,

      　　　　  #ffff00,#ff0000,#ff7d00,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ffff00

     　　　　 );

　　　调用如下：animation: computer 7s linear infinite;

　　　把他的背景尺寸设置成background-size:200%;然后利用背景色的定位，使其实现滚动效果；

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

　　　需要注意的是：background-clip这个属性，他用来设置裁剪背景的区域，我们需要设置成text文本；text-fill-color这个属性用来设置填充色，如果设置了color，color将被覆盖；

　　  以下是我自己的理解：

　　  如果我们去掉background-clip: text;这个属性的话就会看到，背景其实变成了一条色带；通过“背景裁剪”background-clip这个属性，把文本字体轮廓保留；然后去设置背景的样式变化；只有字体那个地方是存在且空白的，其他的地方全部被隐藏了，字体固定了位置保持不变，然后背景在下面匀速滚动，我们就看到了这种样式的字体；

　　　当然，也可以设置成背景图片，用background-size属性设置背景图片尺寸；然后你会发现，图片运行到最后，你会发现“跳图”；把最后的background-position设置成：

-200% 0；正好完美衔接；

　　　刚接触前端没多久，平常喜欢逛逛博客园。我看到了博主妖色调的博客，很炫的效果，就去研究了一下。他的页面有很多好玩的东西，也发表了很多文章，大家可以去看看。

　　　　

　大哥博客：

妖色调