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

本文链接：https://blog.csdn.net/weixin_44072077/article/details/101028509

一，成品图

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

在这里插入图片描述

字节跳动

二，实现步骤

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #2d303a;
			}
			div{
				text-align: center;
				margin-top: 400px;
			}
			span{
				font: normal 500 6rem 'Varela Round', sans-serif;
				color: white;
			}
			
		</style>
		
	</head>
	<body>
		<div>
			<span>武</span>
		</div>
	</body>
</html>

效果：
在这里插入图片描述

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

		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #2d303a;
			}
			div{
				text-align: center;
				margin-top: 400px;
			}
			span{
				position: relative;
				font: normal 500 6rem 'Varela Round', sans-serif;
				color: white;
				animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
				top: 0px;
				
			}
			
			@keyframes bounce {
			  0% {
			    top: 0;
			   
			  }
			  100% {
			    top: -1em;
			    
			  }
			}
		</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;
			}

完成

在这里插入图片描述

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

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
			  width: 100%;
			  height: 100%;
			  margin: 0;
			  background: #2d303a;
			  /* overflow-y: hidden; */
			}
			.bounce {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  width: 100%;
			  color: white;
			  height: 100%;
			  font: normal bold 6rem "Product Sans", sans-serif;
			  white-space: nowrap;
			  /* 文本不换行 */
			}
			.letter {
			  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
			  display: inline-block;
			  transform: translate3d(0, 0, 0);
			  margin-top: 0.5em;
			  text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
			  font: normal 500 6rem 'Varela Round', sans-serif;
			}
			.letter:nth-child(1) {
			  animation-delay: 0s;
			}
			.letter:nth-child(2) {
			  animation-delay: 0.0833333333s;
			}
			.letter:nth-child(3) {
			  animation-delay: 0.1666666667s;
			}
			.letter:nth-child(4) {
			  animation-delay: 0.25s;
			}
			@keyframes bounce {
			  0% {
			    transform: translate3d(0, 0, 0);
			    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
			  }
			  100% {
			    transform: translate3d(0, -1em, 0);
			    text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
			  }
			}
		</style>
	</head>
	<body>
		<div class="bounce">
			<span class="letter">武</span>
			<span class="letter">汉</span>
			<span class="letter">加</span>
			<span class="letter">油</span>	
		</div>

	</body>
</html>

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