本文详解如何仅用 html 和 css 实现多个文本项在固定位置依次执行“上浮→完全显示→下隐”动画，并无缝循环，适用于宣传标语轮播等场景。
本文详解如何仅用 html 和 css 实现多个文本项在固定位置依次执行“上浮→完全显示→下隐”动画，并无缝循环，适用于宣传标语轮播等场景。
要实现如“UTILISATION ILLIMITÉE”“SANS CONTACT”等多行文案在同一位置逐个浮现、动画风格一致、无限循环的效果，关键不在于为每个元素单独定义复杂动画，而在于统一动画时长 + 精确分段控制 + 绝对定位叠加。下面从原理到代码逐步说明。
✅ 核心设计思路
- 所有文本元素需绝对定位（
position: absolute） 于同一容器内，确保视觉上完全重叠； - 使用单个
@keyframes动画，总周期设为12s（4 个文本 × 每个独占 3s 可见窗口），避免动画节奏错位； - 每个文本的
animation-delay错开 3s（0s,3s,6s,9s），形成接力效果； - 动画关键帧严格划分：
-
0%和25%：完全隐藏（opacity: 0; transform: translateY(100%)）； -
12.5%：居中完全显示（opacity: 1; transform: translateY(0)）；
这样每个文本仅在自身 3s 窗口的中间约 0.75s 内清晰可见，其余时间彻底隐藏，实现“一个消失、下一个立即接上”的流畅切换。
-
? 完整可运行代码
<!DOCTYPE html>
<html lang="fr">
<head>
<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: #000000;
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>
</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>⚠️ 注意事项与优化建议
-
字体换行处理：使用
<br>是快速方案，但更健壮的做法是用white-space: pre-line或 CSS Grid/Flex 配合word-break控制断行； -
响应式适配：若需适配移动端，建议用
rem或clamp()替代固定40px字号，并添加媒体查询调整容器高度； -
性能提示：
transform和opacity属于 GPU 加速属性，本方案天然高效；避免对top/left或height等触发重排的属性做动画； -
文字修正：原始代码中 “UTULISATION” 应为 “UTILISATION”，已同步修正；法语连字符和重音符号（如
ÉCO-,ILLIMITÉE）请确保 UTF-8 编码无误； -
调试技巧：临时添加
#textContainer { border: 1px solid #ccc; }可直观查看容器范围，避免因overflow: hidden导致内容被意外裁剪。
通过上述结构化配置，你无需任何 JavaScript 即可实现专业级文案轮播效果——简洁、可控、高性能，且完全符合现代 CSS 最佳实践。
