.shaky2 { color: blue;text-shadow: #FF0099 0px 1px 6px, #FF0099 1px 0px 6px, #FF0099 0px -1px 6px, #FF0099 -1px 0px 6px;display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky2-slow; -ms-animation-name: shaky2-slow; animation-name: shaky2-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes shaky2-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg) } 12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg) } 26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg) } 30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { -webkit-transform: translate(-1px, 0px) rotate(2deg) } 34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg) } 56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg) } 70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg) } 80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg) } 88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg) } } @keyframes shaky2-slow { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { transform: translate(1.4px, 0px) rotate(-2deg) } 12% { transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { transform: translate(1px, 1px) rotate(-0.5deg) } 22% { transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { transform: translate(-1.4px, -1px) rotate(2deg) } 26% { transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg) } 30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { transform: translate(-1px, 0px) rotate(2deg) } 34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { transform: translate(1.6px, -1px) rotate(-2deg) } 56% { transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { transform: translate(0px, 0px) rotate(-1.5deg) } 64% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { transform: translate(0px, -1.6px) rotate(-2deg) } 70% { transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { transform: translate(-1px, 1.4px) rotate(2deg) } 80% { transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { transform: translate(1px, 1.4px) rotate(-2deg) } 88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { transform: translate(-1.4px, 1.6px) rotate(2deg) } 94% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { transform: translate(1.3px, 1px) rotate(-0.5deg) } }


.sqm{
            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: 60% 30%;            /*background-position*/
            /*  */
            animation: masked-animation 3s infinite linear;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0 0;   /*background-position */
            }
            50% {
                background-position: -50% 0;
            }
        }

      .sqm1 {
                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
        }

          .sqm2 {
                font-size: 15px;
                font-family: "妤蜂綋";
             /***   color: #ff00000;  **/
                background: -webkit-linear-gradient(45deg, #ff0000, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -moz-linear-gradient(45deg, #ff0000, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                -ms-linear-gradient(45deg, #ff0000, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
                color: transparent;
                /*璁剧疆瀛椾綋棰滆壊閫忔槑*/
                -webkit-background-clip: text;
                /*鑳屾櫙瑁佸壀涓烘枃鏈舰寮�*/
                animation: ran 70s linear infinite;
                /*鍔ㄦ€�10s灞曠ず*/
            }

            @keyframes ran {
                from {
                    backgroud-position: 0 0;
                }
                to {
                    background-position: 2000px 0;
                }
            }

.sqm3{
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
.sqm4{
    font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink
}
.text-reflect-base{
    color: palegreen;
    -webkit-box-reflect:below 10px;
}
.sqm5{
    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 4s linear infinite;
}
@keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
}

.sqm6 {
            text-align: center;
            width: 200px;
            height: 50px;
         
            border-radius: 30px;
            background-image: linear-gradient(90deg ,#ff44aa, red, yellow,#ff44aa);
            background-size: 400% 100%;
            position: relative;
            color: white;
        }
        .sqm6 a {
            display: inline-block;
            vertical-align: middle;
        }
        .sqm6 a::before {
            content: "";
            filter: blur(10px);
            position: absolute;
            border: #631818 solid 1px;
            top: -5px;
            bottom: -5px;
            left: -5px;
            right: -5px;
            background-image: linear-gradient(90deg ,#ff44aa, red, yellow,#ff44aa);
            display: inline-block;
            z-index: -1;
            border-radius: 30px;
            background-size: 300% 100%;
        }
        .sqm6:hover {
            cursor: pointer;
            animation: mymove 5s infinite;
        }
        @keyframes mymove {
            100% {
                background-position: -200% 0;
            }
        }

.\0073\0071\006d\0033\0035 {
    \0077\0069\0064\0074\0068: 200px;
    \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0069\006d\0061\0067\0065: -webkit-linear-gradient(right, #da6085, #ff00eb 20%, #ff0076 30%, #f3df7a 50%, #f3df7a 60%, #ff00e0 90%, #da6085);
    \0063\006f\006c\006f\0072: transparent;
    -\0077\0065\0062\006b\0069\0074-\0074\0065\0078\0074-\0066\0069\006c\006c-\0063\006f\006c\006f\0072: transparent;
    -\0077\0065\0062\006b\0069\0074-\0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0063\006c\0069\0070: text;
    \006f\0070\0061\0063\0069\0074\0079: 0.5;
    \0074\0072\0061\006e\0073\0066\006f\0072\006d: translate(-10px, 0) scale(.5);
    \0061\006e\0069\006d\0061\0074\0069\006f\006e: ani35 6s forwards infinite;
}

@keyframes \0061\006e\0069\0033\0035 {
    10% {
        \006f\0070\0061\0063\0069\0074\0079: 1;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0070\006f\0073\0069\0074\0069\006f\006e: 0 0;
    }

    40% {
        \006f\0070\0061\0063\0069\0074\0079: 1;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0070\006f\0073\0069\0074\0069\006f\006e: 100% 0;
    }

    60% {
        \006f\0070\0061\0063\0069\0074\0079: 0.5;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0070\006f\0073\0069\0074\0069\006f\006e: 0 0;
    }

    80% {
        \0074\0072\0061\006e\0073\0066\006f\0072\006d: translate(0) scale(1.1);
        \006f\0070\0061\0063\0069\0074\0079: 0;
    }

    100% {
        \0074\0072\0061\006e\0073\0066\006f\0072\006d: translate(0) scale(1);
        \006f\0070\0061\0063\0069\0074\0079: 1;
        \0062\0061\0063\006b\0067\0072\006f\0075\006e\0064-\0070\006f\0073\0069\0074\0069\006f\006e: -100% 0;
    }
}


.sqm7 { display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes shaky-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg) } 12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg) } 26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg) } 30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { -webkit-transform: translate(-1px, 0px) rotate(2deg) } 34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg) } 56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg) } 70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg) } 80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg) } 88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg) } } @keyframes shaky-slow { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { transform: translate(1.4px, 0px) rotate(-2deg) } 12% { transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { transform: translate(1px, 1px) rotate(-0.5deg) } 22% { transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { transform: translate(-1.4px, -1px) rotate(2deg) } 26% { transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg) } 30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { transform: translate(-1px, 0px) rotate(2deg) } 34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { transform: translate(1.6px, -1px) rotate(-2deg) } 56% { transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { transform: translate(0px, 0px) rotate(-1.5deg) } 64% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { transform: translate(0px, -1.6px) rotate(-2deg) } 70% { transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { transform: translate(-1px, 1.4px) rotate(2deg) } 80% { transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { transform: translate(1px, 1.4px) rotate(-2deg) } 88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { transform: translate(-1.4px, 1.6px) rotate(2deg) } 94% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { transform: translate(1.3px, 1px) rotate(-0.5deg) } }



.x-sign {
  --interval: 1s;
  text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 40px var(--color3),
    0 0 80px var(--color4);
  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
}
.x-sign:nth-of-type(1) {
  color: yellow;
  --color1: goldenrod;
  --color2: orangered;
  --color3: mediumblue;
  --color4: purple;
  font-family: Gruppo;
}

.x-sign:nth-of-type(2) {
  color: lightpink;
  --color1: pink;
  --color2: orangered;
  --color3: red;
  --color4: magenta;
  font-family: Bad Script;
}

.x-sign:nth-of-type(3) {
  color: lightyellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: mediumblue;
  font-family: Kumar One Outline;
}

.x-sign:nth-of-type(4) {
  color: lightyellow;
  --color1: gold;
  --color2: firebrick;
  --color3: pink;
  --color4: red;
  font-family: Londrina Outline;
}


.x-sign:nth-of-type(5) {
  color: azure;
  --color1: azure;
  --color2: aqua;
  --color3: dodgerblue;
  --color4: blue;
  font-family: Sriracha;
}

.x-sign:nth-of-type(6) {
  color: tomato;
  --color1: orangered;
  --color2: firebrick;
  --color3: maroon;
  --color4: darkred;
  font-family: Yellowtail;
}

.x-sign:nth-of-type(7) {
  color: lightyellow;
  --color1: yellow;
  --color2: orange;
  --color3: brown;
  --color4: purple;
  font-family: Bad Script;
}

.x-sign:nth-of-type(8) {
  color: yellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: darkgreen;
  font-family: Monoton;
}

.x-sign:nth-of-type(9) {
  color: lightyellow;
  --color1: yellow;
  --color2: gold;
  --color3: orange;
  --color4: darkred;
  font-family: Sriracha;
}
@keyframes flicker {
  50% {
    color: white;
    filter: saturate(200%) hue-rotate(20deg);
  }
}
.side-bar {z-index: 9999;width: 20px;position: fixed;bottom: 15px;right: 25px;display: inline-block;}
#picture {
    margin-top: -20px;
    margin-left: -20px;
    width: 45px;height: 45px;border-radius: 50%;
}
#badge {
    padding: 2px 6px;
    text-align: center;
    background-color: red;
    color: white;
    font-size: 12px;
  
    border-radius: 50%;
    position: relative;
    bottom: 59px;
    left: 9px;
}

/**/
.but{
                border: 2px solid #f35626;
                padding: 1.5rem;
                color: #f35626;
                -webkit-animation: hue 30s infinite linear;
                background-color: transparent;
                -webkit-appearance:none;
                border-radius: 10px;
            }
            @-webkit-keyframes hue {
              from {
                -webkit-filter: hue-rotate(0deg);
              }

              to {
                -webkit-filter: hue-rotate(-360deg);
              }
            }

            .liuguang{
                color: #f35626;
                /*font-size: 6rem;*/
                background-image:-webkit-linear-gradient(92deg,#f35626,#feab3a);
                -webkit-animation: hue 20s infinite linear;
                -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
            }