CSS3实现文字流光渐变特效
来源:互联网 发布:java面试基础知识总结 编辑:程序博客网 时间:2024/05/18 21:42
制作流光文字有几个要点:text-fill-color一般设置为transparent(透明色),然后利用background-image和渐变颜色来设置文字的背景色,利用background-clip来实现文字的截取,再利用background-size设置扩大背景,已使运用animation的时候能达到动画的效果等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
._borderWrap{
width: 180px;
height: 150px;
position: absolute;
left: 23%;
top: 25%;
}
._border{
line-height: 145px;
text-align: center;
font-size: 40px;
font-weight: bolder;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece64825%,#12983550%,#F9E92B75%,rgb(40,150,38));
background-size: 200%,100%;
-webkit-background-clip:text;
-webkit-animation: word 5s linear infinite ;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: -100% 0}
}
</style>
</head>
<body>
<div class="_borderWrap">
<div class="_border">流光字体</div>
</div>
</body>
</html>
阅读全文
1 0
- CSS3实现文字流光渐变特效
- CSS3实现文字流光渐变特效
- CSS3 实现文字流光渐变动画
- css3 文字流光渐变 背景模糊 边框两边伸展
- CSS3玻璃流光特效
- css3字体流光渐变效果
- 纯css3实现的文字亮光特效
- 文字颜色渐变特效
- [HTML5&CSS3]纯css3实现的文字亮光特效
- [HTML5&CSS3]纯css3实现的文字亮光特效
- 流光特效
- CSS3的文字发光特效
- css3实现背景渐变
- CSS3特效之渐变:linear-gradient
- CSS3特效之渐变linear-gradient
- Cocos Creator 实现按钮图标的流光特效(Shader)
- canvas实现渐变文字
- css实现文字渐变
- 上升沿检测代码实现
- Java中的ReentrantLock和synchronized两种锁定机制的对比
- 对于随机森林的通俗理解
- Linux第一课1.1-1.5
- IDEA spring-boot jpa jsp 框架搭建(三)
- CSS3实现文字流光渐变特效
- 我们为什么要使用Spring Cloud?
- java--面向对象之继承2
- 【AI架构】第四范式发布“先知”3.0,助力企业打造AI核心
- 【数字经济】概念、技术、实践:中国 500强泰康集团背后的数据驱动
- Centos7下安装11gR2(Error in invoking target 'agent nmhs' of makefile解决方式)
- 九九乘法表
- html5之sse服务器发送事件EventSource介绍
- IntelliJ IDEA 激活