回忆青春
作为一个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>
天云 : 天云:非常好,非常喜欢。 administrator:学习了。
2020-10-15
回复TA