纯css实现文字跳动的动画效果

最新推荐文章于 2024-05-13 20:01:56 发布

小金的口袋

最新推荐文章于 2024-05-13 20:01:56 发布

阅读量3.4k

点赞数 2

分类专栏： css 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/Jimmmyking/article/details/122012431

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以下图片为截图所得，所以为静态展示

具体实现的详细代码如下，可直接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;
				}
			}

以上代码仅为示例，可根据自己需求进行适当的修改