教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载交替文本动画是一种在网页中循环展示不同单词或短语的动态效果常被用于呈现独特卖点或功能列表为页面增添趣味性。本文基于 30-seconds-of-code 仓库中的 alternating-text 代码片段完整讲解其实现原理用 CSSkeyframes定义文本消失动画再用 JavaScript 监听animationiteration事件在每次动画迭代结束后切换内容。读完本文你将掌握这套零依赖的轮播式文字动画方案并了解其可访问性短板与对应的优化思路。一、核心原理CSS 负责“消失”JavaScript 负责“换词”整个方案由两个层面协作完成CSS 层为目标元素挂上一个无限循环的动画动画在每一轮迭代的末尾将文本隐藏display: none制造出“文字闪没”的视觉缺口。JavaScript 层预先定义一个待轮播的文本数组用数组第一个词初始化元素内容并通过EventTarget.addEventListener()监听animationiteration事件——该事件恰好会在每次动画完成一轮迭代时触发。于是每次动画“闪没”之后元素内容被更新为数组中的下一个词从而形成连贯的交替轮播。这种“动画事件驱动数据更新”的模式避免了定时器的使用让文本切换节奏与 CSS 动画天然同步是 30-seconds-of-code 中 CSS Animations 集合 所收录的典型动画交互技巧之一。二、CSS 部分定义交替文本动画原文档给出的 CSS 定义如下直接作用于承载轮播文本的元素.alternating { animation-name: alternating-text; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; } keyframes alternating-text { 90% { display: none; } }各配置项的作用与可调范围属性取值作用animation-namealternating-text指定要应用的keyframes动画名称须与下方关键帧定义同名animation-duration3s单次动画迭代的时长直接决定每个词停留的时间可依文案长度调整为1s、5s等animation-iteration-countinfinite动画无限循环是轮播效果成立的前提若只想播放有限次数可改为数字animation-timing-functionease缓动函数本示例动画无位移动画此处影响不明显可保留默认值关键帧部分值得深入理解keyframes alternating-text只在90%时间点声明了display: none。这意味着动画前 90% 的时间元素保持显示最后 10% 的时间被隐藏。由于动画无限循环元素会在每个周期的末尾短暂消失——正是这个瞬间JavaScript 利用animationiteration事件完成换词让用户看到“上一个词消失、下一个词出现”的效果。从 CSS 规范角度display属于不可动画属性它无法像opacity或transform那样产生平滑过渡只会瞬间切换。但在本场景中我们恰恰需要这种“瞬断”来隐藏旧词因此用 90% 单一断点即可达成目的。如果想做出更柔和的“淡出换词”效果可以类比仓库中其他动画片段的写法改用opacity配合过渡例如在 zoomin-zoomout-animation 片段 中使用scale与transform实现缩放动画在 loaders 片段 中则用opacity从1过渡到0实现脉冲加载环的消散效果。将这里 90% 处的display: none替换为opacity: 0即可获得淡入淡出的交替体验。三、JavaScript 部分驱动内容循环切换原文档给出的 JavaScript 实现如下const texts [Java, Python, C, C, C#, Javascript]; const element document.querySelector(.alternating); let i 0; const listener e { i i texts.length - 1 ? i 1 : 0; element.innerHTML texts[i]; }; element.innerHTML texts[0]; element.addEventListener(animationiteration, listener, false);逐行拆解其工作机制文本数组texts定义要轮播的词或短语列表可自由扩充为任意字符串集合例如产品特性、促销短语、技术关键词。元素选择document.querySelector(.alternating)选取挂载了 CSS 动画的 DOM 元素。索引游标i记录当前展示词在数组中的下标。listener回调中通过i texts.length - 1 ? i 1 : 0实现“到达末尾后回绕到 0”的循环逻辑保证无限轮播。初始化内容element.innerHTML texts[0]在监听器注册之前先把第一个词写入元素避免页面加载时出现空元素。注册事件element.addEventListener(animationiteration, listener, false)监听动画迭代完成事件。第三个参数false表示在冒泡阶段捕获该事件animationiteration事件会在由 CSS 动画驱动的迭代结束时触发这里正是它与animation-iteration-count: infinite的配合点。注意listener的回调形参e虽未在函数体内使用但保留它是为了保持签名完整、便于后续扩展例如通过e.animationName区分多个同时运行的动画——在同一个元素上叠加多个动画时可用该属性判断到底哪个动画完成了迭代再决定是否换词。四、完整可运行的整合示例将 HTML、CSS、JavaScript 三者组合即可得到一套开箱即用的交替文本轮播组件div classalternating/div.alternating { animation-name: alternating-text; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; } keyframes alternating-text { 90% { display: none; } }const texts [Java, Python, C, C, C#, Javascript]; const element document.querySelector(.alternating); let i 0; const listener e { i i texts.length - 1 ? i 1 : 0; element.innerHTML texts[i]; }; element.innerHTML texts[0]; element.addEventListener(animationiteration, listener, false);使用提示可为.alternating补充font-size、color等样式使其适配页面的视觉体系若轮播词长度差异较大可设置固定min-width或text-align: center避免每次换词时页面布局跳动词数较多时可适当缩短animation-duration词数少如 23 个时则相应延长让每个词都有充足的阅读时间。五、性能与调优要点保持动画轻量本方案的动画只切换display不涉及transform、opacity的持续计算主线程负担极小。如需扩展为淡入淡出效果建议沿用仓库其他片段中对transform的优化思路如 loaders 片段 中提示使用translate3d()单轴平移以获得更好的合成性能避免对width、height这类触发重排的属性做动画。事件驱动的节奏一致性因为换词动作绑定在animationiteration事件上只要动画时长稳定换词节奏就与视觉消失瞬间严格对齐不会出现“词还没消失就已换掉”或“消失很久才换词”的错位。六、可访问性警示原文档明确提示原文档对这套实现给出了明确的警告务必重视[!CAUTION] 该实现对屏幕阅读器不可访问not accessible to screen readers。因为轮播中的旧词会被display: none隐藏、新词通过innerHTML动态替换屏幕阅读器无法稳定地读出正在展示的内容。要提升可访问性可以采取以下措施依原文档建议方向ARIA 属性为轮播容器设置rolestatus或aria-livepolite让辅助技术感知内容变化并朗读最新文本语义化降级将轮播文本的完整列表以静态、可读的形式保留在页面中例如紧随其后的ul列表保证关闭 JavaScript 或使用辅助技术时信息不丢失替代方案必要时放弃 JS 轮播改用 CSS 变量驱动的纯静态逐词展示或参考仓库中 typewriter-effect 片段 这类同样轻量但信息呈现更线性的动画方案结合aria-label为容器提供等价文本。七、延伸同主题动画片段的横向参考交替文本动画属于 30-seconds-of-code 中 CSS Animations 集合 的成员该集合由tagMatcher: animation聚合所有动画主题片段。若你正在搭建一组品牌化的动态文字效果可以与本仓库内其他动画片段配合使用typewriter-effect 片段基于 CSS 变量与steps()逐字显现的打字机效果同样只用少量 JavaScript 设置文本风格更偏叙事与悬念loaders 片段弹跳小球、脉冲涟漪、甜甜圈旋转三种加载指示器适合与轮播文案搭配用于异步内容占位zoomin-zoomout-animation 片段单元素的scale缩放循环动画可用于强调当前展示词。八、小结交替文本动画的完整实现可概括为三步定义无限循环的 CSS 动画并在末尾隐藏元素 → 用数组首个元素初始化内容 → 监听animationiteration事件在每次迭代后切换到下一词。这套方案代码量小、无第三方依赖非常适合用于卖点轮播、特性陈列等场景同时必须铭记其屏幕阅读器不可访问的缺陷在投入生产环境前应补充 ARIA 或静态文本降级方案。原始代码片段收录于 content/snippets/css/s/alternating-text.md你可随时回到仓库查看最新版本。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of Code用 CSS 缓动变量Easing Variables打造高级动画节奏30 Seconds of Code用 CSS 缓动变量Easing Variables打造高级动画节奏 导读 本文源自 30 seconds of co教程文档30 Seconds of Code 实战用纯 CSS 打造环形进度条SVG CSS 变量 property30 Seconds of Code 实战用纯 CSS 打造环形进度条SVG CSS 变量 property 环形进度条circular pr教程文档CSS 渐变文字效果实战用 background-clip 与 -webkit-text-fill-color 打造渐变文字30 seconds of codeCSS 渐变文字效果实战用 background clip 与 webkit text fill color 打造渐变文字30 seconds of cod教程文档上一篇3分钟掌握Blender智能重拓扑QRemeshify快速入门终极指南下一篇Windows 11系统优化神器Win11Debloat让你的电脑重获新生创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
