纯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;}}

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

纯css实现文字跳动的动画效果相关推荐

纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频此视频是可 ...
沙漏PHP代码,如何使用纯CSS实现一个沙漏的动画效果
本篇文章给大家带来的内容是关于如何使用css实现监控网络连接状态的页面 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/c ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
纯CSS实现SVG路径描边动画效果
SVG中有一个比较重要度属性,stroke.stroke有很多兄弟属性: 1)stroke:线的颜色: 2)stroke-width:线的宽度: 3)stroke-linecap:线的端点,可用值有b ...
vue实现纯css直播点赞图标的动画效果组件
一.效果图直播点赞动画二.完整代码如下  <template> <ul class="g-wrap">< ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...

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

纯css实现文字跳动的动画效果相关推荐

最新文章

热门文章