从小姐姐博客那里看到的流光文字(CSS3 animate)
2024-08-29 08:13:37
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代。你们卟懂绯紸流!色彩缤纷的QQ空间......
还记得那些炫酷的签名档,或者那些炫酷的动态头像。不过大家对于流光文字的印象还是图片。那么在网页中怎么实现呢?
你说的在网页里面插入一张图片不就搞定了。这,,,确实可以。今天要讲的是利用纯CSS3绘制流光文字,可以直接显示,并不需要图片。
css代码:
@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}}
插入标签id即可:<p id="masked">cosyer的博客</p>
最新文章
- iOS开发之SQLite--C语言接口规范(三)——Binding Values To Prepared Statements
- mac office 激活
- Unbalanced calls to begin/end appearance transitions for **
- spring retry 使用
- MySQL 常用命令(持续更新)
- Nutch插件系统
- Android UI之下拉刷新上拉刷新实现
- spring 读取properties的两种方法
- hdoj 1247 Hat’s Words(字典树)
- TCanvas.CopyRect方法中参数CopyMode的意义
- js变量作用域及访问权限的探讨(2)
- Python学习笔记(五)--Python数据类型-数字及字符串
- Installing VirtualBox
- Js 转动抽奖实现
- IIS下配置跨域设置Access-Control-Allow-Origin
- Concurrent usage detected
- 048 SparkSQL自定义UDAF函数
- 利用图片的灰度平均值来进行分类实现手写图片识别(数据集50000张图片)——Jason niu
- #学习笔记#JSP数据交互
- Relu的理解
热门文章
- 【Luogu】P1040加分二叉树(区间DP)
- 【倒跑并查集维护连通块】NCPC 2016 A. Artwork
- 互不侵犯King(bzoj 1087)
- 洛谷 [P1939] 矩阵加速数列
- UIApplicationDelegate详解
- substring用法
- POJ 2396 有源有汇有上下界可行流问题
- 详解DNS,你真的懂吗?
- 1.关于无rospy.spin()调用多次callback 2. subscrib后面语句和callback函数运行顺序
- Ubuntu 16.04安装IntelliJ IDEA时快捷键冲突设置