我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

效果图

页面结构

我们将#app盒子铺满整个屏幕，将#bounce作为承载跳动文字的盒子

 <div id="app">
        <ul id="bounce"></ul>
    </div>

初始样式

清除元素的默认内外边距，将#app盒子铺满全屏后，利用flex布局将内容位列在屏幕正中心

     * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
        }

跳动文字动画实现

跳动文字的动画，我们采用csstransform: translateY属性进行实现，通过这个属性实现元素的上下移动，动画终点时元素向上移动30px

    /* 跳动动画 */
        @keyframes jump {
            100% {
                transform: translateY(-30px);

            }
        }

跳动文字

给跳动文字的大盒子flex布局将内容水平垂直居中，跳动文字每一个都占一个元素，这样便于动画进行，然后再给跳动文字盒子设置字体大小和样式，再给跳动文字盒子添加上跳动动画，开启动画无限循环以及可以反向播放动画，开启反向动画可以让动画执行完成之后可以进行反向播放，这样不会出现动画执行完之后元素突然回到初始位置

        /*跳动大盒子 */
        #bounce {
            display: flex;
            justify-content: center;
            align-items: center;
        }
           /* 跳动盒子 */
        #bounce>li {
            margin-right: 10px;
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            animation: jump 0.6s linear infinite alternate;

        }

跳动文字逻辑实现

我们将要跳动的文字放到str变量中，speed是动画的执行速度，我们默认是0.5s,然后通过js方法获取到跳动文字父级，然后通过js方法把我们的跳动文字分割成数组，在进行循环，每次循环都会创建一个dom元素，将跳动的每一个文字，都插入到新创建的dom元素中，并且设置一下动画执行时间，我们这里需要套入公式（当前跳动文字的长度- 当前元素的下标 * 默认的动画执行速度），动画执行时间是负数，最后插入到跳动文字父级中即可

  let str = '中秋快乐!';
        let speed = 0.5;
        let bounce = document.getElementById('bounce');
        str.split('').map((R, index) => {
            let lis = document.createElement('li');
            lis.innerText = R;
            lis.style = `animation-delay: -${parseFloat((str.length - index) * speed)}s;`
            bounce.appendChild(lis)
        })

代码放到码上掘金上了，感兴趣的大家可以看一下！

坚持努力，无惧未来！