﻿ .span1 {
        animation: LetterColor 3s linear infinite;
        /* 计算每个字的动画起始时间 */
        animation-delay: calc(0.1s * var(--o));
        }
@keyframes LetterColor {
    0%{
        color: #fff;
        /* 利用模糊距离不同的阴影实现霓虹灯光晕效果 */
        text-shadow: 
        0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff,
        0 0 300px #00b3ff,
        0 0 400px #00b3ff;
        /* 设置高斯模糊与色调，实现模糊效果和颜色变换 */
        filter: blur(0px) hue-rotate(0deg);
    }
    30%,70% {
        color: #fff;
        /* 减少光晕大小 */
        text-shadow: 
        0 0 10px #00b3ff,
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff,
        0 0 200px #00b3ff;
        /* 色调变换360度 */
        filter: blur(0px) hue-rotate(360deg);
    }
    100% {
        /* 动画结束字变透明 */
        color: transparent;
        /* 动画结束消除阴影 */
        text-shadow: none;
        /* 动画结束色调重置 */
        filter: blur(0px) hue-rotate(0deg);
    }
}