效果图
页面结构
我们将
#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; }
跳动文字动画实现
跳动文字的动画，我们采用css
transform: 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) })
代码放到码上掘金上了，感兴趣的大家可以看一下！
