css彩虹文字

用CSS3实现彩虹文字的效果，只在Webkit内核的浏览器（谷歌浏览器或移动端）上有效果。

background-image: 
    -webkit-gradient(linear, left top, right top, color-stop(0, #f22), 
    color-stop(0.15, #f2f),
    color-stop(0.3, #22f),
    color-stop(0.45, #2ff),
    color-stop(0.6, #2f2),
    color-stop(0.75, #2f2),
    color-stop(0.9, #ff2),
    color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;

来看看具体的效果：

 在夜深任静的时候，想起她。

原理是将文字设置为透明，然后通过背景图片中的渐变给透明的文字上色。

 

"有时候，虽然能想明白，但心里就是接受不了。"

转载于:https://www.cnblogs.com/yanggb/p/11214306.html