首页 > Web开发 > 详细

css实现渐变字体和流光字体

时间:2019-12-18 11:54:08      阅读:299      评论:0      收藏:0      [点我收藏+]

这是段渐变文本

.text{
     font-size: 30px;
     font-weight: bold;
     background-image: linear-gradient(#ed3f27, #9b0999);
     -webkit-background-clip: text;
     color: transparent ;
}

 

这是段流光文本

.text2{
     -webkit-text-fill-color: transparent;
     background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,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}
}

 

参考:CSS3 text-fill-color简介及应用展示

css实现渐变字体和流光字体

原文:https://www.cnblogs.com/buerwei/p/12058868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!