﻿.masked {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    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;
    }
}

.masked2 {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    background-image: -webkit-linear-gradient(left, #ffa080, #ffa060 10%, #ffa040 20%, #ffa020 30%, #ffa0a0 40%, #ffa080 50%, #ffa060 80%, #ffa040 70%, #ffa020 80%, #ffa000 90%, #ffff00);
    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;
    }
}

.masked1 {
    display: inline;
    width: 200px;
    height: 22px;
    /*渐变背景*/

    background-image: -webkit-linear-gradient(left, #ff0080, #ff0060 10%, #ff0040 20%, #ff0020 30%, #ff00a0 40%, #ff0080 50%, #ff0060 80%, #ff0040 70%, #ff0020 80%, #ff0000 90%, #ffff00);
    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;
    }
}

.lmma {
    color: #ffff00;
}

.caise_jt {
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text
}

.caise3 {
    color: #f2f;
    background: -webkit-linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -moz-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -ms-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -o-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    color: transparent;
    /*设置字体颜色透明*/
    -webkit-background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 5s linear infinite;
    /*动态5s展示*/
}

@keyframes ran {
    from {
        backgroud-position: 0 0;
    }

    to {
        background-position: 200px 0;
    }
}

.caise4 {
    color: aqua;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #999, 0px 1px 0px #888, 0px 1px 0px #777, 0px 1px 0px #666, 0px 1px 0px #555, 0px 1px 0px #444, 0px 1px 0px #333, 0px 1px 7px #001135
}

.caise5 {
    text-shadow: 1px 1px 6px deeppink;
    color: deeppink
}

.caise6 {
    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
    -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 3s linear infinite;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.caise7 {
    --interval: 1s;
    text-shadow: 0 0 5px var(--color1), 0 0 5px var(--color2), 0 0 5px var(--color3), 0 0 5px var(--color4);
    will-change: filter, color;
    filter: saturate(60%);
    animation: flicker steps(100) var(--interval) 1s infinite;
}

    .caise7:nth-of-type(1) {
        color: yellow;
        --color1: azure;
        --color2: orangered;
        --color3: mediumblue;
        --color4: dodgerblue;
        font-family: Gruppo;
    }

    .caise7:nth-of-type(2) {
        color: lightpink;
        --color1: pink;
        --color2: mediumblue;
        --color3: dodgerblue;
        --color4: azure;
        font-family: Bad Script;
    }

    .caise7:nth-of-type(3) {
        color: lightyellow;
        --color1: yellow;
        --color2: dodgerblue;
        --color3: green;
        --color4: mediumblue;
        font-family: Kumar One Outline;
    }

    .caise7:nth-of-type(4) {
        color: lightyellow;
        --color1: gold;
        --color2: dodgerblue;
        --color3: pink;
        --color4: azure;
        font-family: Londrina Outline;
    }

    .caise7:nth-of-type(5) {
        color: azure;
        --color1: azure;
        --color2: aqua;
        --color3: dodgerblue;
        --color4: blue;
        font-family: Sriracha;
    }

    .caise7:nth-of-type(6) {
        color: azure;
        --color1: green;
        --color2: pink;
        --color3: dodgerblue;
        --color4: green;
        font-family: Yellowtail;
    }

    .caise7:nth-of-type(7) {
        color: lightyellow;
        --color1: yellow;
        --color2: orange;
        --color3: pink;
        --color4: purple;
        font-family: Bad Script;
    }

    .caise7:nth-of-type(8) {
        color: yellow;
        --color1: yellow;
        --color2: pink;
        --color3: azure;
        --color4: pink;
        font-family: Monoton;
    }

    .caise7:nth-of-type(9) {
        color: lightyellow;
        --color1: yellow;
        --color2: gold;
        --color3: azure;
        --color4: pink;
        font-family: Sriracha;
    }

@keyframes flicker {
    50% {
        color: white;
        filter: saturate(200%) hue-rotate(90deg);
    }
}