本文详解如何仅用 html 和 css 实现多个文本在固定位置依次“上浮入场→高亮显示→下沉隐去”的循环轮播动画，确保每个文本独占视觉焦点、无缝衔接、精准时序控制。
本文详解如何仅用 html 和 css 实现多个文本在固定位置依次“上浮入场→高亮显示→下沉隐去”的循环轮播动画，确保每个文本独占视觉焦点、无缝衔接、精准时序控制。
要实现「utilisation ILLIMITÉE」「sans contact」等多行文案在同一位置逐个轮播浮现（非叠加、不跳动、有节奏感），关键在于：统一总周期 + 精确分段 + 绝对定位覆盖。原方案中 6s 动画与 3s 延迟冲突，导致文本重叠或空白；正确解法是将整个轮播周期设为 12s（4 个文本 × 每个专属展示窗口 3s），并让每个文本仅在自身 3s 窗口内完成「入场→高光→退场」，其余 9s 完全不可见。
✅ 核心原理拆解
-
总周期 = 文本数量 × 单文本活跃时长 →
4 × 3s = 12s -
单文本动画关键帧需严格划分：
-
0%和25%：完全隐藏（opacity: 0; transform: translateY(100%)） -
12.5%：居中高亮（opacity: 1; transform: translateY(0)）→ 实现对称缓入缓出
-
-
所有文本绝对定位：通过
position: absolute叠加在同一区域，避免文档流位移 -
错峰延迟：
nth-child(n)分别延时0s、3s、6s、9s，确保每 3s 切换主角
? 完整可运行代码
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cool Text Animation</title><style>
@keyframes coolAnimation {
0%, 25% {
opacity: 0;
transform: translateY(100%);
}
12.5% {
opacity: 1;
transform: translateY(0);
}
}
#textContainer {
position: relative;
height: 120px; /* 建议显式设高，兼容多行文本高度 */
overflow: hidden;
font-family: 'Myriad Pro', Arial, sans-serif;
}
.coolText {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
color: #000;
font-size: 40px;
line-height: 1.2;
text-align: center;
animation: coolAnimation 12s ease-in-out infinite;
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">UTULISATION<br>ILLIMITEÉ</h3>
<h3 class="coolText">SANS<br>CONTACT</h3>
<h3 class="coolText">SANS<br>ABONNEMENT</h3>
<h3 class="coolText">ECO-<br>RESPONSABLE</h3>
</div>
⚠️ 注意事项与优化建议
-
字体与换行：使用
<br>实现强制折行时，建议添加line-height: 1.2和text-align: center提升可读性； -
容器高度：
#textContainer显式设置height（如120px）可防止因字体渲染差异导致布局抖动； -
性能提示：
transform和opacity属于 GPU 加速属性，本方案天然高效；避免对top/left或font-size做动画； -
响应式扩展：如需适配移动端，可用
vw单位定义font-size，并配合@media调整height和animation-duration； -
文本修正：原始 HTML 中
UTULISATION应为UTILISATION（法语拼写），建议同步修正以保证专业性。
此方案零 JavaScript、纯 CSS 驱动，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100），是轻量级营销文案轮播的理想实现。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
