核心内容摘要
《图书馆少女》动漫第一季在线观看：一场穿越时空的奇幻邂逅
标一划文字就蹦迪HTMLCSS搞定跳动文字动画新手友好版鼠标一划文字就蹦迪HTMLCSS搞定跳动文字动画新手友好版说实话啊我第一次在某某创意网站上看到那个文字效果的时候还以为是什么黑魔法。
鼠标往上一怼那行字瞬间就跟打了鸡血似的挨个往上蹦跟弹簧成精了似的。
当时我就寻思这得用多少行 JS 啊CanvasWebGL结果右键一审查元素好家伙纯 CSS 搞定我当时那个心情啊就跟发现暗恋对象其实也喜欢自己一样——原来这么简单所以今儿个咱不整那些虚的就手把手教你怎么用 HTMLCSS 搞出这个蹦迪文字效果。
先说好这篇是新手友好版但老手也别急着关后面有骚操作。
咱们要搞就搞透彻从这啥啊到我也会了再到我还能改一条龙服务。
这玩意儿到底长啥样先给你描述一下啊免得你想象不出来。
就是你页面上有一行字比如立即购买或者关于我们正常状态下它躺那儿装死跟普通文字没啥两样。
但是当你的鼠标划上去那一瞬间神奇的事情发生了——每个字母或者每个汉字开始轮流往上跳不是整体跳是挨个跳跟 wave 似的一波接一波错落有致看着就特别灵动。
要是你文字是HELLO那就是 H 先蹦一下然后 E 跟着蹦然后 L、L、O 依次跟上形成那种波浪状的律动。
要是中文比如你好世界那就是你先起跳好稍慢半拍世再慢点界最后收尾整个一个 cyberpunk 味儿的文字 disco。
这种效果妙就妙在它是微交互不搞那种花里胡哨的闪瞎眼就是细节处给你惊喜。
用户可能也就划一下但心里会哎哟一声觉得这个站有点东西。
而且我跟你说这效果现在可火了那些搞创意设计的、做个人博客的、甚至是电商大促页面都爱用这招成本低逼格高属于前端界的平价奢侈品。
底层靠的是谁行知道长啥样了咱得聊聊这魔术是怎么变的。
别被吓到啊真的就三个东西比你泡方便面还简单。
首先是 HTML它的活儿就是把文字拆开。
你想啊如果要让每个字单独跳那得每个字单独控制对不对所以咱们得把你好拆成两个标签你一个好一个。
用啥包呢span是最合适的行内元素不破坏布局指哪打哪。
然后是 CSS 的transform specifically 是translateY。
这个属性干嘛的呢就是上下移动。
咱们让文字往上蹦其实就是从原位往上移个十几二十像素再回来模拟那个弹跳感。
为啥不用top或者margin-top哎这个问题问得好因为那些会触发重排reflow性能差卡成 PPT。
transform是 GPU 加速的丝滑得很手机上也流畅。
最后是animation节奏大师。
咱们得定义关键帧告诉浏览器0%的时候你在原位50%的时候你蹦上去100%的时候你回来。
然后给每个字设置不同的animation-delay让第一个字第 0 秒开始跳第二个字晚
1 秒第三个晚
2 秒这样就有了先后顺序形成波浪。
有人可能要问那 JS 呢不用 JS 吗真不用纯 CSS 就能搞定:hover触发。
当然如果你文字是后端动态输出的可能需要 JS 帮忙拆字包 span但动画本身CSS 足矣。
这就是为啥我说这是低成本高回报代码量极少效果极好老板看了流泪产品经理看了心碎因为他们也想要。
拆开揉碎讲实现好了好了重头戏来了代码伺候。
别光看不练啊建议你这时候就打开 VS Code 跟着敲敲完看效果比看一百遍都有用。
首先是最基础的 HTML 结构。
咱们假设要做个立即抢购的按钮文字divclassbounce-textspan立/spanspan即/spanspan抢/spanspan购/span/div看到了吗一个字一个 span简单粗暴。
当然实际项目中你不可能手动一个个包后面我会给你自动化的方案但现在先手动理解原理最重要。
然后是 CSS咱们一步步来先让单个字能跳.bounce-text span{display:inline-block;/* 关键必须加不然 transform 不起作用 */transition:transform
3s ease;}.bounce-text:hover span{transform:translateY(-10px);/* 往上挪 10 像素 */}这时候你运行一下鼠标划上去四个字整体往上飘对吧但咱要的是挨个蹦不是集体搬家。
所以得加动画还得错开时间。
先定义动画关键帧keyframesjump{0%, 100%{transform:translateY(
;/* 原位 */}50%{transform:translateY(-20px);/* 跳到最高点 */}}这个jump动画就是核心了从原地到上空 20px 再回到原地一个完整的弹跳周期。
然后给每个 span 应用这个动画但关键是延迟.bounce-text span{display:inline-block;animation:jump
6s ease-in-out infinite;/* 先都加上但先暂停 */animation-play-state:paused;/* 默认不动节省资源 */}.bounce-text:hover span{animation-play-state:running;/* 鼠标上去才开始蹦 */}/* 错开时间形成波浪 */.bounce-text span:nth-child(
{animation-delay:0s;}.bounce-text span:nth-child(
{animation-delay:
1s;}.bounce-text span:nth-child(
{animation-delay:
2s;}.bounce-text span:nth-child(
{animation-delay:
3s;}看到nth-child了吗这就是 CSS 的选择器魔法不用给每个 span 起名字自动匹配第几个孩子。
延迟时间依次增加
1 秒wave 效果就出来了。
但是这里有个坑我得提前给你预警。
如果你只是这样写会发现鼠标移开后动画戛然而止字可能卡在半空中贼丑。
咱们希望的是鼠标移开后当前这一轮跳完就乖乖停别卡在奇怪的姿势上。
所以更好的写法是用keyframes控制单次循环配合animation-fill-mode.bounce-text span{display:inline-block;/* 默认状态没有动画或者有但暂停在 0% */transform:translateY(
;}.bounce-text:hover span{animation:jump
6s ease-in-out;animation-fill-mode:both;/* 保持关键帧状态 */}/* 每个字的延迟 */.bounce-text span:nth-child(
{animation-delay:0s;}.bounce-text span:nth-child(
{animation-delay:
1s;}.bounce-text span:nth-child(
{animation-delay:
2s;}.bounce-text span:nth-child(
{animation-delay:
3s;}等等这样还是有问题鼠标移出后动画直接没了。
所以最稳妥的方案其实是默认动画运行但透明度为 0不对太复杂了。
其实对于这种 hover 效果一般就是接受立即停止或者用 JS 控制更好。
但纯 CSS 方案下简单粗暴点就用transition做 fallback.bounce-text span{display:inline-block;transition:transform
3s;}.bounce-text:hover span{animation:jump
6s ease-in-out infinite;}/* 各个 span 的延迟同上 */这样鼠标上去开始蹦移开的时候transition接管平滑回到原位虽然动画是立即停止的但至少位置会平滑回去不至于卡半空。
来给你个完整能跑的版本直接复制粘贴就能看效果!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale
0title文字蹦迪效果/titlestylebody{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;}.bounce-text{font-size:48px;font-weight:bold;color:white;cursor:pointer;letter-spacing:8px;/* 字间距拉开点看着更舒服 */}.bounce-text span{display:inline-block;/* 给每个字默认加个过渡hover 移开时平滑回落 */transition:transform
3scubic-bezier(
4,
0,
2,
,color
3s ease;will-change:transform;/* 性能优化告诉浏览器这元素要变形 */}/* 鼠标悬停时触发彩色变化增加视觉层次 */.bounce-text:hover span{color:#ffd700;/* 变成金色富贵 */}/* 关键帧定义弹跳动画 */keyframesbounce-jump{0%, 100%{transform:translateY(
scale(
;}50%{transform:translateY(-25px)scale(
1.
;/* 往上跳的时候稍微放大一点更有冲击力 */}}/* 激活动画 */.bounce-text:hover span{animation:bounce-jump
8s ease-in-out infinite;}/* 用 CSS 变量批量设置延迟比写 nth-child 优雅多了 */.bounce-text span:nth-child(
{animation-delay:calc(var(--delay-step,
1s)*
;}.bounce-text span:nth-child(
{animation-delay:calc(var(--delay-step,
1s)*
;}.bounce-text span:nth-child(
{animation-delay:calc(var(--delay-step,
1s)*
;}.bounce-text span:nth-child(
{animation-delay:calc(var(--delay-step,
1s)*
;}/* 更多字就继续往下加或者用 JS 动态设置 style *//* 再加个悬停时的阴影效果让字浮起来 */.bounce-text:hover{text-shadow:0 10px 20pxrgba(0,0,0,
0.
;}/style/headbodydivclassbounce-textidtextspan点/spanspan我/spanspan有/spanspan惊/spanspan喜/span/divscript// 这里给个 JS 方案自动给文字包 span省得你手动一个个写// 实际项目中文字可能是从数据库来的不可能手动包consttextEldocument.getElementById(text);consttexttextEl.innerText;textEl.innerHTMLtext.split().map(charspan${char}/span).join();// 动态设置延迟比写死 CSS 更灵活constspanstextEl.querySelectorAll(span);spans.forEach((span,index){span.style.animationDelay${index*
1}s;});/script/body/html看到这段代码了吗我特意整了个渐变色背景让白色文字更突出。
里面有几个细节我得啰嗦一下will-change: transform这行是性能优化告诉浏览器这货要变形了提前准备一下能避免卡顿特别是文字多的时候。
cubic-bezier(
4,
0,
2,
这是 Material Design 的缓动曲线看着比普通的ease更自然有那种物理弹簧的感觉。
我在 jump 动画里不仅位移了还加了scale(
1.
就是跳起来的时候稍微变大落地恢复更有弹性感。
你可以试试改成scale(
0.
那就是跳起来缩小感觉像被压扁也很可爱。
JS 那段是实用技巧自动拆字。
实际项目中你肯定不能写死五个 span万一文案改成立即抢购优惠券呢所以用 JS 把字符串切成数组再 map 成 span 是最靠谱的。
这招好在哪坑又埋哪好了效果实现了咱们得冷静下来分析分析。
不能光顾着嗨得知道这玩意儿适合啥时候用啥时候会翻车。
优点那是相当明显。
首先是轻量就几行 CSS没用任何库加载速度零负担。
你哪怕在 2G 网络下这段代码也是秒加载。
而且语义清晰HTML 结构就是文字SEO 友好搜索引擎爬虫看得懂不像 Canvas 或者图片文字爬虫一脸懵逼。
性能方面也是杠杠的纯 CSS 动画走 GPU 加速手机上也流畅。
不像有些 JS 动画主线程一忙就卡。
而且这个效果可访问性也不错如果用户开了减少动画的系统设置你可以用media (prefers-reduced-motion: reduce)把它关掉照顾晕车……啊不晕动画的用户。
但是坑也是有的。
最大的坑就是DOM 节点爆炸。
你想啊每个字一个 span如果一整篇文章都这么搞那 DOM 数量直接翻倍页面会变卡。
所以千万别在正文大段文字上用这招浏览器会哭。
只适合短文本比如按钮、标题、导航项。
第二个坑是动态内容。
如果你用的是 Vue 或者 React文字是这种绑定的那你得写个指令或者组件来自动拆字包 span稍微麻烦点。
而且如果文字经常变每次都要重新拆包有点性能损耗。
第三个坑是移动端。
手机上没有 hover 状态啊你手指戳上去是active或者touch不是hover。
所以在移动端这招基本失效除非你把:hover改成:active但那样就得按住才跳松手就停体验怪怪的。
移动端可能需要配合点击事件或者用其他方案。
还有个隐藏坑是字间距。
如果你字体本身比较紧凑跳起来的时候可能会重叠特别是中文。
所以记得加letter-spacing或者确保line-height够大给跳动留足空间。
真实项目里怎么用才不翻车知道坑在哪了咱就得学会在刀尖上跳舞。
这效果虽然骚但得用在刀刃上。
最适合的场景是CTA 按钮Call To Action就是立即购买“免费咨询”“点击下载这种。
用户鼠标划过去文字一跳潜意识就被引导了觉得这按钮在召唤我”点击率能上去几个点。
你 A/B 测试一下往往有惊喜。
第二个好场景是导航栏。
特别是那种创意工作室、设计师作品集网站导航项就四五个字“关于我们”作品案例这种鼠标划过去跳一下整个网站的调性就出来了显得你很会玩很注重细节。
还有一种用法是加载状态。
比如提交表单的时候把提交中三个字搞成跳动让用户知道系统在处理减少焦虑感。
这时候甚至可以不用 hover直接默认循环动画。
但是千万别在正文里用我再说一遍大段文字如果用这个效果用户会疯的。
看一行跳一行跟看那种会动的恶心的 GIF 似的阅读体验零分。
而且 SEO 虽然能读但用户体验差跳出率飙升。
还有别滥用。
一个页面有一两处就够了比如主按钮和主标题。
如果满屏都在蹦跟进了迪厅似的用户会晕而且显得特别廉价像那种流氓广告网站。
色彩搭配也要注意。
跳动本身就很吸引注意力了颜色再搞得花里胡哨跟彩虹糖似的那就过犹不及了。
建议用对比色但饱和度别太高或者就用黑白灰靠动画本身抓眼球。
遇到动画不动、节奏乱、卡成PPT怎么办敲完代码发现没效果别慌咱们来排插排查。
症状一完全不动跟死鱼一样首先检查display: inline-block加了没有。
这是新手最常忘的。
span 默认是inlineinline元素不能 transform这是 CSS 规范必须改成inline-block或者block。
你就记住要动就得是块级或行内块。
其次检查keyframes名字拼对没有CSS 是区分大小写的jump和Jump是两个东西。
还有animation简写属性顺序别搞错虽然现代浏览器容错率高但最好还是按标准顺序name duration timing-function delay iteration-count direction fill-mode。
症状二节奏乱了不是波浪是群魔乱舞检查animation-delay是不是负值。
如果是负值动画会立即开始但从中间某个状态开始看着就很乱。
确保 delay 是正的而且递增。
还有可能是选择器权重问题。
如果你用.bounce-text span设置了 delay后面又用.bounce-text span:nth-child(
设置要确保后者能覆盖前者。
可以用浏览器开发者工具F12检查元素看最终应用的样式。
症状三卡成 PPT一顿一顿的首先看你是不是在动画里改了width、height、margin、left、top这些属性。
改这些会触发重排reflow代价巨大。
只能用transform和opacity这俩是 GPU 加速的。
然后检查will-change加了没有。
虽然现代浏览器越来越聪明但显式声明一下还是有帮助的。
但注意别给太多元素加will-change会占用显存反而卡。
还有可能是你的文字太多了。
十个二十个字还好如果一百个字同时跳那神仙也救不了显卡都要冒烟。
控制数量或者只在 hover 时给部分文字加动画。
症状四鼠标移开字卡在半空中这个前面说了纯 CSS 很难完美解决。
要么接受立即停止要么用 JS 监听mouseleave等当前动画循环结束再移除 class。
或者就是用transition做回退让字平滑回到原位虽然动画停了但位置是正的。
还有个调试技巧打开 Chrome 的开发者工具切到 Animations 面板如果没有按右上角三个点 More tools - Animations你可以逐帧看动画调 timing-function可视化地调整贝塞尔曲线比瞎猜强多了。
几个骚操作让你代码更优雅基础版你会了咱们来点进阶的让你的代码看起来像个老油条写的。
骚操作一CSS 变量动态控制与其写死
1s、
2s不如用 CSS 变量这样改起来方便.bounce-text{--delay-step:
08s;/* 调整这个值改变波浪密度 */--jump-height:-30px;/* 调整跳的高度 */}.bounce-text span:nth-child(n){animation-delay:calc(var(--delay-step)*var(--index,
);}/* 用 inline style 设置每个字的 index */然后 JS 拆字的时候span.style.setProperty(--index,index);这样你想调速度调高度改一个地方就行不用改一堆 nth-child。
骚操作二随机延迟更自然有时候固定的
1s、
2s 看着太机械了像军训。
咱们可以加点随机性spans.forEach((span,index){constrandomDelayMath.random()*
5;// 0到
5秒随机span.style.animationDelay${randomDelay}s;});这样每个字随机时间开始跳更自然像一群小精灵而不是军训方阵。
骚操作三结合其他 transform光上下跳太单调了咱们可以旋转、缩放、甚至 3D 翻转keyframescrazy-jump{0%{transform:translateY(
rotate(0deg)scale(
;}25%{transform:translateY(-20px)rotate(5deg)scale(
1.
;}50%{transform:translateY(
rotate(0deg)scale(
0.
;}75%{transform:translateY(-10px)rotate(-5deg)scale(
1.
;}100%{transform:translateY(
rotate(0deg)scale(
;}}看到没跳起来的时候往一边歪落地的时候往另一边歪还带缩放这质感立马就上来了。
但别过度太 crazy 了会分散注意力。
骚操作四文字阴影联动跳的时候阴影也要跟着变才有立体感.bounce-text span{transition:text-shadow
3s,transform
3s;text-shadow:0 2px 4pxrgba(0,0,0,
0.
;}.bounce-text:hover span{text-shadow:0 15px 30pxrgba(0,0,0,
0.
;/* 跳得高影子拉得远还变淡模拟光照 */}骚操作五渐变文字跳动现在流行那种渐变色文字配合跳动效果更炸.bounce-text{background:linear-gradient(45deg,#f093fb 0%,#f5576c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}先把文字变渐变然后再让它跳视觉效果 double kill。
注意background-clip的兼容性IE 肯定不支持但谁还管 IE 呢对吧。
骚操作六响应式适配在手机上咱们可以改成点击触发或者用 CSS 的media (hover: hover)检测设备是否支持 hovermedia(hover:hover){/* 只在支持 hover 的设备上启用比如电脑 */.bounce-text:hover span{animation:jump
6s ease-in-out infinite;}}media(hover:none){/* 手机等设备用 active 或者干脆不玩这个效果 */.bounce-text:active span{animation:jump
6s ease-in-out;}}这样移动端体验也不会太割裂。
最后唠两句你看就这么个看似简单的效果拆开了讲能讲这么多门道。
前端这活儿就是这样入门容易精通难一个 CSS 动画都能玩出花儿来。
我得再强调一遍别光看动手敲。
你现在就打开编辑器把上面的代码复制过去跑起来然后改参数看效果。
把translateY(-20px)改成translateY(-50px)看看是不是蹦得更高了把ease-in-out改成linear看看是不是变成机械舞了把infinite去掉看看是不是只跳一次。
只有动手改你才能真正理解这些属性是干嘛的。
下次面试官问你 CSS 动画你不仅能说出transform和animation还能聊性能优化、GPU 加速、可访问性甚至能现场写个 demo那offer不给你给谁而且啊这种小特效特别适合放在你的个人作品集里。
比如你的 portfolio 网站标题用这招面试官一打开“哎哟有点东西”印象分就有了。
技术深度不一定是搞多复杂的架构把简单的东西做到极致也是本事。
行了差不多就这些。
代码给你了原理讲了坑也预警了骚操作也教了。
剩下的就看你自己了。
去折腾吧去改吧去把这效果用在你下一个项目上吧。
记住前端工程师的手是创造价值的手不是只会搬砖的手。
完。
欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。
推荐DTcode7的博客首页。
一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等
总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。
它与HTML和CSS并称前端三剑客共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。
Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细
总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习
总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习
总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。
望诸君海涵赐教。
望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。
愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。
倘若尚存阙漏敬请不吝斧正俾便精进