📌  相关文章
📜  跷跷板文字动画(1)

📅  最后修改于: 2023-12-03 15:28:14.863000             🧑  作者: Mango

跷跷板文字动画

简介

跷跷板文字动画是一种利用HTML5和CSS3实现的文字动画效果。通过利用CSS3中的动画效果和transform属性，实现文字在跷跷板上上下跳跃的效果。

实现原理
  1. 首先在HTML中创建跷跷板和文字的DOM元素，如下所示：
<div class="seesaw">
  <div class="board"></div>
  <div class="text">hello world</div>
</div>
  1. 使用CSS设置跷跷板和文字的样式，如下所示：
.seesaw {
 position: relative;
 width: 100px;
 height: 100px;
 margin: 50px auto;
}
.board {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 10px;
 border-radius: 50%;
 background-color: #333;
 transform-origin: center bottom;
 animation: seesaw 2s ease-in-out forwards infinite;
}
.text {
 position: absolute;
 bottom: 20px;
 left: 0;
 width: 100%;
 text-align: center;
 font-size: 24px;
 color: #fff;
 animation: text 2s ease-in-out forwards infinite;
}

@keyframes seesaw {
 0%, 100% {
  transform: rotate(0deg);
 }
 50% {
  transform: rotate(-10deg);
 }
}

@keyframes text {
 0%, 100% {
  transform: translateY(0px);
 }
 50% {
  transform: translateY(-20px);
 }
}

  1. 在CSS中定义一个名为“seesaw”的动画，使跷跷板在2秒内向上下倾斜10度，并在动画结束后保持最终状态。在动画中使用transform属性实现旋转效果。

  2. 在CSS中定义一个名为“text”的动画，使文字在2秒内向上下跳动20像素，并在动画结束后保持最终状态。在动画中使用transform属性实现上下移动效果。

示例代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Seesaw Text Animation</title>
	<style>
		.seesaw {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 50px auto;
		}
		.board {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 10px;
			border-radius: 50%;
			background-color: #333;
			transform-origin: center bottom;
			animation: seesaw 2s ease-in-out forwards infinite;
		}
		.text {
			position: absolute;
			bottom: 20px;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 24px;
			color: #fff;
			animation: text 2s ease-in-out forwards infinite;
		}

		@keyframes seesaw {
			0%, 100% {
				transform: rotate(0deg);
			}
			50% {
				transform: rotate(-10deg);
			}
		}

		@keyframes text {
			0%, 100% {
				transform: translateY(0px);
			}
			50% {
				transform: translateY(-20px);
			}
		}
	</style>
</head>
<body>
	<div class="seesaw">
		<div class="board"></div>
		<div class="text">hello world</div>
	</div>
</body>
</html>

返回的markdown如下：

# 跷跷板文字动画

## 简介

跷跷板文字动画是一种利用HTML5和CSS3实现的文字动画效果。通过利用CSS3中的动画效果和transform属性，实现文字在跷跷板上上下跳跃的效果。

## 实现原理

1. 首先在HTML中创建跷跷板和文字的DOM元素，如下所示：

```html
<div class="seesaw">
  <div class="board"></div>
  <div class="text">hello world</div>
</div>
  1. 使用CSS设置跷跷板和文字的样式，如下所示：
.seesaw {
 position: relative;
 width: 100px;
 height: 100px;
 margin: 50px auto;
}
.board {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 10px;
 border-radius: 50%;
 background-color: #333;
 transform-origin: center bottom;
 animation: seesaw 2s ease-in-out forwards infinite;
}
.text {
 position: absolute;
 bottom: 20px;
 left: 0;
 width: 100%;
 text-align: center;
 font-size: 24px;
 color: #fff;
 animation: text 2s ease-in-out forwards infinite;
}

@keyframes seesaw {
 0%, 100% {
  transform: rotate(0deg);
 }
 50% {
  transform: rotate(-10deg);
 }
}

@keyframes text {
 0%, 100% {
  transform: translateY(0px);
 }
 50% {
  transform: translateY(-20px);
 }
}

  1. 在CSS中定义一个名为“seesaw”的动画，使跷跷板在2秒内向上下倾斜10度，并在动画结束后保持最终状态。在动画中使用transform属性实现旋转效果。

  2. 在CSS中定义一个名为“text”的动画，使文字在2秒内向上下跳动20像素，并在动画结束后保持最终状态。在动画中使用transform属性实现上下移动效果。

示例代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Seesaw Text Animation</title>
	<style>
		.seesaw {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 50px auto;
		}
		.board {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 10px;
			border-radius: 50%;
			background-color: #333;
			transform-origin: center bottom;
			animation: seesaw 2s ease-in-out forwards infinite;
		}
		.text {
			position: absolute;
			bottom: 20px;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 24px;
			color: #fff;
			animation: text 2s ease-in-out forwards infinite;
		}

		@keyframes seesaw {
			0%, 100% {
				transform: rotate(0deg);
			}
			50% {
				transform: rotate(-10deg);
			}
		}

		@keyframes text {
			0%, 100% {
				transform: translateY(0px);
			}
			50% {
				transform: translateY(-20px);
			}
		}
	</style>
</head>
<body>
	<div class="seesaw">
		<div class="board"></div>
		<div class="text">hello world</div>
	</div>
</body>
</html>