本文详解如何仅用 html 和 css 实现多个文本（如“utilisation illimitÉe”“sans contact”等）在固定位置依次淡入上浮、高亮显示后淡出下移，并无缝循环轮播，关键在于精确计算关键帧百分比与动画时长。
本文详解如何仅用 html 和 css 实现多个文本（如“utilisation illimitÉe”“sans contact”等）在固定位置依次淡入上浮、高亮显示后淡出下移，并无缝循环轮播，关键在于精确计算关键帧百分比与动画时长。
要实现多个文本在同一容器内逐个“升起—高亮—沉降”并循环播放的效果，核心挑战在于：每个文本的动画必须严格错开、互不干扰，且视觉上始终只有一条文本完整可见于目标位置。原方案中 6s 动画 + 3s 延迟会导致重叠或空白，正确解法是采用 统一 12 秒总周期 + 精确关键帧调度。
✅ 关键原理：12 秒周期 × 4 项 = 每项独占 3 秒“可见窗口”
- 总动画时长设为
12s（4 个文本 × 各自 3 秒专属时段）； - 每个文本的
animation-delay依次递增3s（0s / 3s / 6s / 9s），确保严格错峰； - 在
@keyframes中，仅用0%–25%区间定义单次完整进出动作：-
0%和25%：完全透明、位于下方（transform: translateY(100%)）； -
12.5%（即 12s 的 1/8 = 1.5s 处）：达到顶部、完全不透明（opacity: 1; transform: translateY(0)）； - 其余时间保持不可见，避免干扰其他文本。
-
✅ 必须添加的样式细节
-
.coolText需设为position: absolute，使所有文本层叠于同一坐标，否则默认文档流会导致垂直堆叠； -
#textContainer应设overflow: hidden（注意原答案中拼写错误roverflow需修正），裁切移出区域的过渡内容； - 字体、颜色、行高建议补充
line-height和text-align: center提升可读性（非必需但推荐）。
? 完整可运行代码示例
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本轮播动画</title><style>
@keyframes coolAnimation {
0%, 25% {
opacity: 0;
transform: translateY(100%);
}
12.5% {
opacity: 1;
transform: translateY(0);
}
}
#textContainer {
position: relative;
overflow: hidden; /* 重要：修正拼写，隐藏溢出 */
height: 120px; /* 建议显式设高，确保容器尺寸稳定 */
text-align: center;
}
.coolText {
color: #000000;
font-family: 'Myriad Pro', Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 40px;
line-height: 1.2;
animation: coolAnimation 12s ease-in-out infinite;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(100%);
}
.coolText:nth-child(1) { animation-delay: 0s; }
.coolText:nth-child(2) { animation-delay: 3s; }
.coolText:nth-child(3) { animation-delay: 6s; }
.coolText:nth-child(4) { animation-delay: 9s; }
</style><div id="textContainer">
<h3 class="coolText">UTILISATION<br>ILLIMITÉE</h3>
<h3 class="coolText">SANS<br>CONTACT</h3>
<h3 class="coolText">SANS<br>ABONNEMENT</h3>
<h3 class="coolText">ÉCO-<br>RESPONSABLE</h3>
</div>
⚠️ 注意事项与优化建议
-
字体大小适配：
40px在移动端可能过大，建议配合媒体查询使用rem或clamp()； -
性能提示：
transform和opacity是 CSS 中仅触发合成器的属性，本方案天然高性能，无需额外优化； -
可扩展性：若新增文本项，只需同步增加
.coolText:nth-child(N)规则，并按3s步长更新animation-delay，同时保持总动画时长为N × 3s； -
语义化增强：
<h3></h3>标签用于强调标题语义；若仅为装饰性文本，可改用<div role="presentation"> 避免屏幕阅读器误读。<p>通过该方案，你将获得一个轻量、无 JS、语义清晰且高度可控的 CSS 文本轮播系统——真正实现「一个位置，多种文案，平滑切换，无限循环」。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
