css实现字体流光溢彩的动画形式

　　css实现字体流光溢彩的动画形式

.txt{
     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;
            }
        }

　　实现线性渐变，从上往下。

　　#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}

打赏 赞( )

微信

支付宝

用微信扫描二维码打赏

用支付宝扫描二维码打赏