純css實現文字跳動的動畫效果

以下圖片為截圖所得，所以為靜態展示

具體實現的詳細代碼如下，可直接cv復用：

html部分代碼：

<h1 class="my-words">
			<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span>
			</span><span>w</span><span>o</span><span>r</span><span>l</span><span>d</span>
		</h1>

css部分代碼：

body {
				background-color: skyblue;
			}

			.my-words span {
				position: relative;
				animation: my-words 2s infinite;
			}

			.my-words span:nth-child(2n) {
				animation-delay: 0.3s;
			}

			.my-words span:nth-child(3n) {
				animation-delay: 0.15s;
			}

			.my-words span:nth-child(5n) {
				animation-delay: 0.4s;
			}

			.my-words span:nth-child(7n) {
				animation-delay: 0.25s;
			}

			.my-words span:nth-child(9n) {
				animation-delay: 0.15s;
			}


			h1 {
				letter-spacing: 1px;
				margin: 150px auto;
				text-align: center;
				font-weight: 400;
				text-transform: uppercase;
				font-size: 7rem;
				color: #FF9C55;
				text-shadow: -1px -1px #0D4E3B,
					-1px -0.75px #0D4E3B,
					-1px -0.5px #0D4E3B,
					-1px -0.25px #0D4E3B,
					-1px 0px #0D4E3B,
					1px -1px #0D4E3B,
					1px -0.75px #0D4E3B,
					1px -0.5px #0D4E3B,
					1px -0.25px #0D4E3B,
					1px 0px #0D4E3B,
					0px 1px #0D4E3B,
					-0.25px 1px #0D4E3B,
					-0.5px 1px #0D4E3B,
					-0.75px 1px #0D4E3B,
					-1px 1px #0D4E3B,
					0 0.25px #0D4E3B,
					0 0.5px #0D4E3B,
					0 0.75px #0D4E3B,
					-0.75px 0.75px #0D4E3B,
					-0.25px 0.25px #0D4E3B,
					1px 0.25px #0D4E3B,
					1px 0.5px #0D4E3B,
					1px 0.75px #0D4E3B,
					1px 1px #0D4E3B,
					0px 6px #0D4E3B,
					-1px 6px #0D4E3B,
					-1px 5px #0D4E3B, -1px 5.75px #0D4E3B, -1px 5.5px #0D4E3B, -1px 5.25px #0D4E3B,
					-1px 4px #0D4E3B, -1px 4.75px #0D4E3B, -1px 4.5px #0D4E3B, -1px 4.25px #0D4E3B,
					-1px 3px #0D4E3B, -1px 3.75px #0D4E3B, -1px 3.5px #0D4E3B, -1px 3.25px #0D4E3B,
					-1px 2px #0D4E3B, -1px 2.75px #0D4E3B, -1px 2.5px #0D4E3B, -1px 2.25px #0D4E3B,
					-1px 1px #0D4E3B, -1px 1.75px #0D4E3B, -1px 1.5px #0D4E3B, -1px 1.25px #0D4E3B,
					1px 5px #0D4E3B, 1px 5.75px #0D4E3B, 1px 5.5px #0D4E3B, 1px 5.25px #0D4E3B,
					1px 4px #0D4E3B, 1px 4.75px #0D4E3B, 1px 4.5px #0D4E3B, 1px 4.25px #0D4E3B,
					1px 3px #0D4E3B, 1px 3.75px #0D4E3B, 1px 3.5px #0D4E3B, 1px 3.25px #0D4E3B,
					1px 2px #0D4E3B, 1px 2.75px #0D4E3B, 1px 2.5px #0D4E3B, 1px 2.25px #0D4E3B,
					1px 1px #0D4E3B, 1px 1.75px #0D4E3B, 1px 1.5px #0D4E3B, 1px 1.25px #0D4E3B;
			}

			h1 span:nth-child(2n) {
				color: #F47AFF;
			}

			h1 span:nth-child(3n) {
				color: #FFD913;
			}

			h1 span:nth-child(5n) {
				color: #555BFF;
			}

			h1 span:nth-child(7n),
			h1 span:nth-child(12n) {
				color: #FF5555;
			}


			@keyframes my-words {
				0% {
					top: 0;
				}

				50% {
					top: -10px;
				}

				100% {
					top: 0;
				}
			}

以上代碼僅為示例，可根據自己需求進行適當的修改