纯CSS3 3D动感文字动画特效

原创已于 2025-06-27 13:12:36 修改 · 511 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-12 13:52:37 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3 3D动感文字动画特效</title>
<style>
/* 基础样式 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
perspective: 1000px;
}

/* 插入链接样式 */
.inserted-link {
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 12px;
text-decoration: none;
opacity: 0.5;
transition: opacity 0.3s;
z-index: 100;
}
.inserted-link:hover {
opacity: 1;
}

/* 3D文字容器 */
.text-3d {
position: relative;
transform-style: preserve-3d;
animation: rotate 8s infinite linear;
}

/* 3D文字样式 */
.text-3d span {
position: relative;
display: inline-block;
font-size: 80px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #0ff,
0 0 20px #0ff,
0 0 30px #0ff;
transform-style: preserve-3d;
transition: transform 0.3s;
}

/* 为每个字母创建3D效果 */
.text-3d span::before,
.text-3d span::after {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: rgba(0, 255, 255, 0.3);
}

.text-3d span::before {
transform: translateZ(-15px);
}

.text-3d span::after {
transform: translateZ(-30px);
color: rgba(0, 255, 255, 0.1);
}

/* 鼠标悬停效果 */
.text-3d:hover span {
animation: letterBounce 0.5s ease;
}

.text-3d:hover {
animation-play-state: paused;
}

/* 旋转动画 */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
transform: rotateX(20deg) rotateY(40deg) rotateZ(10deg);
}
50% {
transform: rotateX(0deg) rotateY(80deg) rotateZ(0deg);
}
75% {
transform: rotateX(-20deg) rotateY(40deg) rotateZ(-10deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}

/* 字母弹跳动画 */
@keyframes letterBounce {
0%, 100% {
transform: translateY(0) scale(1, 1);
}
25% {
transform: translateY(-30px) scale(1.2, 0.8);
}
50% {
transform: translateY(0) scale(1, 1);
}
75% {
transform: translateY(-15px) scale(1.1, 0.9);
}
}

/* 背景光点效果 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

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

@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
</style>
</head>
<body>

<div class="text-3d">
<span data-char="C">C</span>
<span data-char="S">S</span>
<span data-char="S">S</span>
<span data-char="3">3</span>
<span data-char="动">动</span>
<span data-char="感">感</span>
<span data-char="文">文</span>
<span data-char="字">字</span>
</div>

<div class="particles" id="particles"></div>

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');

// 随机大小
const size = Math.random() * 5 + 1;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;

// 随机位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.bottom = `-${size}px`;

// 随机动画延迟和持续时间
particle.style.animationDelay = `${Math.random() * 15}s`;
particle.style.animationDuration = `${10 + Math.random() * 20}s`;

particlesContainer.appendChild(particle);
}
</script>
</body>
</html>