使用纯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>


版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/html5css3/5.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 1 条评论,你也快来参与吧!

天云 : 天云:非常好,非常喜欢。 administrator:学习了。

2020-10-15

回复TA

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主