本文详解如何仅用 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提升可读性（非必需但推荐）。
? 完整可运行代码示例
<!DOCTYPE html>
<html lang="fr">
<head>
<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>
</head>
<body>
<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>
</body>
</html>⚠️ 注意事项与优化建议
-
字体大小适配：
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>
