3D立体文字动画

原创已于 2025-06-27 13:49:44 修改 · 676 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-30 14:22:58 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D立体文字动画</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a1a2e, #16213e);
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.container {
position: relative;
perspective: 1000px;
}

.text-3d {
position: relative;
font-size: 8vw;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
animation: rotate 8s infinite linear;
}

.text-3d span {
position: relative;
display: inline-block;
transform-style: preserve-3d;
}

.text-3d span::before,
.text-3d span::after {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
transform-origin: left center;
}

.text-3d span::before {
color: rgba(255, 255, 255, 0.3);
transform: rotateY(40deg);
z-index: -1;
}

.text-3d span::after {
color: rgba(255, 255, 255, 0.1);
transform: rotateY(70deg);
z-index: -2;
}

@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(10deg);
}
50% {
transform: rotateY(180deg) rotateX(10deg);
}
100% {
transform: rotateY(360deg) rotateX(10deg);
}
}

.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.particle {
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: float linear infinite;
}

@keyframes float {
to {
transform: translateY(-100vh);
}
}

.link {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
text-decoration: none;
transition: color 0.3s;
}

.link:hover {
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="text-3d">
<span data-char="3">3</span>
<span data-char="D">D</span>
<span data-char="立">立</span>
<span data-char="体">体</span>
<span data-char="文">文</span>
<span data-char="字">字</span>
</div>
<div class="particles" id="particles"></div>

</div>