使用纯CSS3制作动态流光文字特效代码,让文字炫起来


回忆青春

作为一个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>
数据统计中,请稍等!
发表评论
评论列表