前端 跳动的字符

#loginText span {
    top: 20px; /* 让文本从上方留出15像素的距离 */
    position: relative; /* 相对定位，为下面的动画做准备 */
    transform: translate(-50%, -50%); /* 将元素置中，必须和position同时使用 */
    font-family: "楷体", sans-serif; /* 设置字体，首选楷体，backup是sans-serif */
    font-size: 60px; /* 字号，设为60像素 */
    font-weight: bold; /* 加粗 */
    animation: jump 0.5s ease 0s infinite alternate; /* 使用名为jump的动画，时间为0.5秒，
                                            无初始延迟，无限循环，交替反转执行（一个上跳，一个下落）*/
    color:rgb(52, 49, 40); /* 设置字体颜色为RGB值 (52, 49, 40) */
    text-shadow: 0 1px 0 #CCC,  
            0 2px 0 #CCC,
            0 3px 0 #CCC,
            0 4px 0 #CCC,
            0 5px 5px rgba(0, 0, 0, 0.5); /* 配置让文字有阴影的效果 */
    animation-iteration-count: infinite; /* 让动画无限循环不停止 */
}

#loginText span:nth-child(2) {
    animation-delay: 0.2s; /* 设置第2个span的动画开始位置延迟0.2秒 */
}

#loginText span:nth-child(3) {
    animation-delay: 0.3s; /* 设置第3个span的动画开始位置延迟0.3秒 */
}

#loginText span:nth-child(4) {
    animation-delay: 0.4s; /* 设置第4个span的动画开始位置延迟0.4秒 */
}

@keyframes jump { /* 定义名为jump的关键帧动画 */
    100% { /* 只指定了动画完成后状态，100%表示动画完成时，即上跳结束，下落未开始 */
        top: -20px; /* 移动到向上20像素的位置 */
    }
}

先给需要跳动的字每个元素上动画，然后依次给每个字设置时间间隔，达到差分跳动的目的 ，上方流出位置让其不会跳出格，一直跳出格会很卡，动画效果不流畅