文字层叠动画效果

原创已于 2025-06-27 15:50:41 修改 · 390 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2025-04-21 15:50:14 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字层叠动画效果</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.stack-container {
position: relative;
width: 300px;
height: 200px;
}

.stack-text {
position: absolute;
font-size: 48px;
font-weight: bold;
color: #333;
opacity: 0;
transform: translateY(50px);
animation: stackAnimation 3s infinite;
}

.stack-text:nth-child(1) {
color: #ff6b6b;
animation-delay: 0s;
}

.stack-text:nth-child(2) {
color: #48dbfb;
animation-delay: 0.5s;
}

.stack-text:nth-child(3) {
color: #1dd1a1;
animation-delay: 1s;
}

.stack-text:nth-child(4) {
color: #feca57;
animation-delay: 1.5s;
}

.stack-text:nth-child(5) {
color: #5f27cd;
animation-delay: 2s;
}

@keyframes stackAnimation {
0% {
opacity: 0;
transform: translateY(50px);
}
20% {
opacity: 1;
transform: translateY(0);
}
80% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-50px);
}
}

.credit {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<div class="stack-container">
<div class="stack-text">层叠</div>
<div class="stack-text">文字</div>
<div class="stack-text">动画</div>
<div class="stack-text">效果</div>
<div class="stack-text">演示</div>
</div>