2020前端不得不掌握的css3动画特效之（字节跳动，武汉加油！）

一，成品图

本人自学css3动画特效，今天分享一个简单的字节跳动的特效

字节跳动

二，实现步骤

我们先来尝试一个字的跳动,我决定选取武汉加油的武字。
1： 第一步，消除浏览器默认样式，并且在网页上写一个武字。
2： 第二步，设置页面背景色，设置字体样式大小，并且居中。

	
		
		
		
		
	
	
		

			武
		
	

效果：

3： 第三步，利用animation属性让字跳起来。下面是style样式代码

4： 第四步，设置字体阴影，让跳动更加立体。
修改bound动画代码块：

@keyframes bounce {
			  0% {
			    top: 0;
			    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
			  }
			  100% {
			    top: -1em;
			    text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
			  }
			}

5： 多个字一起跳动，设置字体跳动延迟。

span:nth-child(1) {
			  animation-delay: 0s;
			}
			span:nth-child(2) {
			  animation-delay: 0.0833333333s;
			}
			span:nth-child(3) {
			  animation-delay: 0.1666666667s;
			}
			span:nth-child(4) {
			  animation-delay: 0.25s;
			}

完成

代码不够健壮，没有考虑文字过多的情况

完整代码：

	
		
		
		
	
	
		

			武
			汉
			加
			油	
		

	

css动画实现表白爱心树落叶效果
html常见基础标签大汇总