先上效果：

CSS:文字跳动特效

思路：
这次我们的目标是实现文字的跳动。第一步：在页面中显示文字。HTML代码如下：

嗨，早上好

第二步：使用CSS进一步修饰。
1.首先我们将body元素所容纳的空间看成一块画布。然后设置画布的大小。宽度没有明确设置，默认与浏览器显示同宽。高度设置为800px.
2.将这块画布设置为弹性布局(display:flex)。即：能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。
3.把flex容器内的元素在主轴上居中显示(justify-content:center)。
4.把flex容器内的元素在交叉轴上居中显示(align-items:center)。
5.设置整块画布的背景颜色(background-color:pink)。

 body{height:800px;display:flex;justify-content:center;align-items:center;background-color:pink;}

第三步：修饰文字。
1.将文字所在的元素空间设置为相对定位(position:relative)。
2.把文字所在的元素空间距离父元素的顶部保持20像素距离。如果在某一个时间段再拉近 20像素的距离，并且将这两个状态线性连贯起来，就想成了我们想要的文字跳动动画。
3.将文字的字体大小设置为150px(font-size:150px)。
4.设置字体颜色为白色(color:white)。
5.设置动画效果。1.动画名称(change)。2.动画时长(0.3s)。3.动画的速度曲线(ease:默认值，动画以低速开始，然后加快，最后在结束前变慢)。4.动画播放次数(infinite:无限循环)。5.轮流反向播放(alternate:轮流方向播放)。
6.设置文本阴影。使其看起来更像立体的。（text-shadow:横向移动距离，纵向移动距离，模糊度，颜色）

span{position:relative;top:20px;font-size:150px;color:white;animation:change 0.3s ease infinite alternate;text-shadow:1px 1px 0 #ccc,2px 2px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc,6px 6px 0 #ccc,7px 7px 0 #ccc,8px 8px 0 #ccc,9px 9px 0 #ccc,10px 10px 10px rgba(0,0,0,0.5);}

第四步：设置不同文字的动画延迟时间。

 h1 span:nth-child(2){animation-delay:0.1s;}h1 span:nth-child(3){animation-delay:0.2s;}h1 span:nth-child(4){animation-delay:0.3s;}h1 span:nth-child(5){animation-delay:0.4s;}

第五步：实现动画。
1.改变距离父元素顶部的距离(top:-20px)。
2.修改阴影效果，使其看起来更加逼真。

 @keyframes change{100%{top:-20px;text-shadow:1px 1px 0 #ccc,2px 2px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc,6px 6px 0 #ccc,7px 7px 0 #ccc,8px 8px 0 #ccc,9px 9px 0 #ccc,10px 50px 25px rgba(0,0,0,0.3);}}

CSS完成版代码：