CSS3实现文字渐变动态效果

419 2020/06/08 艾维畅想网

本篇文章介绍的用CSS3实现文字渐变动态效果。


示例代码:

.div-effects{
    width:650px;
    height:300px;
    margin:0 auto;
    margin-top:150px;
    font-size:80px;
    text-align:center;
    background:-webkit-linear-gradient(left,#147B96,#E6D205 25%,#147B96 50%,#E6D205 75%,#147B96);
    color:transparent;
    -webkit-background-clip:text;
    background-size:200% 100%;
    animation:masked-animation 1s infinite linear;
}
@-webkit-keyframes masked-animation {
0%{
    background-position:0 0;
}
100%{
    background-position:-100% 0;
}
}


HTML代码:

<div class="div-effects">艾维畅想网</div>


效果预览:

image.png

分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 腾讯微博
  • 新浪微博
  • 人人网
成都艾维畅想网络科技有限公司
地址:成都市双流区华阳镇西寺路石化大厦酒店附近100米
联系人:满经理(成都/北京) 沈经理(广州)
电话:199-3875-5567
QQ:845583755(成都/北京) 578551723(广州)
邮箱:845583755@qq.com
  • 微信公众号
  • 手机版
  • 微信小程序

——需求定制——

您的姓名
联系电话
需求
热门标签: 品牌网站建设 | 购物商城建设 | 微信公众号 | 微信小程序 | APP开发 | 响应式开发 北京网站建设 | 成都网站建设 | 广州网站建设 | 网站推广优化 | 网站维护 | 服务器环境搭建 LOGO设计 | 宣传册设计 | 产品包装设计 | 名片设计 | 海报设计 | 广告设计
Copyright © 2011-2020 艾维畅想网 All Right Reserved.
ICP备案: 蜀ICP备20018253号-1
川公网安备 51010402000995号 川公网安备 51010402000995号

在线
客服

客服
热线

199-3875-5567
7*24小时客服服务热线

新浪
微博

微信
咨询

微信咨询

关注
微信

关注官方微信公众号
顶部