首页 > CSS实现字体流光/高光滑动

流光溢彩高光,CSS实现字体流光/高光滑动

互联网 2021-03-03 12:37:42

    这是个字体流光效果

 

.masked h4{             display: block;             width: 600px;             height: 100px;             /*渐变背景*/             background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,             #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);             color: transparent; /*文字填充色为透明*/             -webkit-text-fill-color: transparent;             -webkit-background-clip: text;          /*背景剪裁为文字,只将文字显示为背景*/             background-size: 200% 100%;            /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/             /* 动画 */             animation: masked-animation 4s infinite linear;         }         @keyframes masked-animation {             0% {                 background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/             }             100% {                 background-position: -100% 0;             }         }

 

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。

相关阅读