回忆青春

作为一个90后，毕竟也是经历过非主流年代的人，对什么动态头像，幻彩头像，火星文啊，流光文字啊并不陌生！虽然说这些东西早已消失在网络上了，但是不可否认，那段时光真的很美好，很开心。即使现在想起来有些好笑，也阻止不了那时候很多很多美好的回忆袭来。

正文开始

对于流光文字呢，上面也说了，经历过那个年代的人也并不陌生！但是怎么在网页中实现呢？可能有人会说了，弄一张图片放到网页上面不就行了吗？，，这，，好像确实可以！

比如这段文字，你一定发现了，它是流光的！然后今天我们要说的是怎么利用CSS3在网页中直接显示流光文字

代码部分

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {    #masked {        background-image: -webkit-linear-gradient(left, #129835, #ece648 25%, #129835 50%, #F9E92B 75%, rgb(40, 150, 38));        -webkit-text-fill-color: transparent;        -webkit-background-clip: text;        -webkit-background-size: 200% 100%;        -webkit-animation: masked-animation 4s infinite linear
    }
}

@-webkit-keyframes masked-animation {
    0% {        background-position: 0 0
    }

    100% {        background-position: -100% 0
    }
}

使用说明

代码部分中的#masked是流光文字的标签！如果你需要在某些地方使用，可以直接加入 id="masked" 就可以了。

<p id="masked">这里是代码演示，你也可以这样写！</p>