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