<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #121212;
color: white;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
perspective: 1000px;
}
.container {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}
@keyframes rotate {
from { transform: rotateY(0deg) rotateX(20deg); }
to { transform: rotateY(360deg) rotateX(20deg); }
}
.text-3d {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 1px #4facfe;
text-stroke: 1px #4facfe;
transform-style: preserve-3d;
transition: all 0.5s ease;
}
.text-3d::before {
content: attr(data-text);
position: absolute;
color: #4facfe;
-webkit-text-stroke: 1px transparent;
text-stroke: 1px transparent;
transform: translateZ(-20px);
opacity: 0.5;
filter: blur(5px);
}
.text-3d::after {
content: attr(data-text);
position: absolute;
color: #00f2fe;
-webkit-text-stroke: 1px transparent;
text-stroke: 1px transparent;
transform: translateZ(20px);
opacity: 0.5;
filter: blur(5px);
}
.controls {
margin-top: 50px;
text-align: center;
}
.control-btn {
background: linear-gradient(to right, #4facfe, #00f2fe);
border: none;
color: white;
padding: 10px 20px;
margin: 0 10px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 242, 254, 0.3);
}
.control-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 242, 254, 0.5);
}
.footer {
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
@media (max-width: 600px) {
.container {
width: 200px;
height: 200px;
}
.text-3d {
font-size: 40px;
}
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="text-3d" data-text="3D文字"></div>
</div>
<div class="controls">
<button class="control-btn" id="changeText">更换文字</button>
<button class="control-btn" id="changeSpeed">改变速度</button>
<button class="control-btn" id="changeColor">改变颜色</button>
</div>
<div class="footer">
</div>
<script>
const container = document.getElementById('container');
const text3d = document.querySelector('.text-3d');
const changeTextBtn = document.getElementById('changeText');
const changeSpeedBtn = document.getElementById('changeSpeed');
const changeColorBtn = document.getElementById('changeColor');
// 可选的文字内容
const textOptions = [
"3D文字", "HTML5", "CSS3", "JavaScript",
"炫酷特效", "旋转动画", "前端开发", "创意设计"
];
// 可选的动画速度
const speedOptions = [30, 20, 10, 5, 60];
let currentSpeedIndex = 1;
// 可选的配色方案
const colorSchemes = [
{ primary: '#4facfe', secondary: '#00f2fe' }, // 蓝-青
{ primary: '#f46b45', secondary: '#eea849' }, // 橙-黄
{ primary: '#a18cd1', secondary: '#fbc2eb' }, // 紫-粉
{ primary: '#43e97b', secondary: '#38f9d7' }, // 绿-青
{ primary: '#ff758c', secondary: '#ff7eb3' } // 红-粉
];
let currentColorIndex = 0;
// 初始化
function init3DText() {
const letters = text3d.textContent.split('');
text3d.innerHTML = '';
letters.forEach((letter, index) => {
const span = document.createElement('span');
span.textContent = letter;
span.style.transform = `rotateY(${index * (360 / letters.length)}deg) translateZ(100px)`;
span.style.transitionDelay = `${index * 0.05}s`;
text3d.appendChild(span);
});
}
// 更换文字
function changeText() {
const randomText = textOptions[Math.floor(Math.random() * textOptions.length)];
text3d.setAttribute('data-text', randomText);
text3d.textContent = randomText;
// 添加动画效果
text3d.style.animation = 'none';
void text3d.offsetWidth; // 触发重绘
text3d.style.animation = 'pulse 0.5s';
init3DText();
}
// 改变速度
function changeSpeed() {
currentSpeedIndex = (currentSpeedIndex + 1) % speedOptions.length;
container.style.animationDuration = `${speedOptions[currentSpeedIndex]}s`;
}
// 改变颜色
function changeColor() {
currentColorIndex = (currentColorIndex + 1) % colorSchemes.length;
const colors = colorSchemes[currentColorIndex];
document.documentElement.style.setProperty('--primary-color', colors.primary);
document.documentElement.style.setProperty('--secondary-color', colors.secondary);
// 更新文字颜色
text3d.style.setProperty('-webkit-text-stroke-color', colors.primary);
text3d.style.setProperty('text-stroke-color', colors.primary);
text3d.querySelectorAll('span').forEach(span => {
span.style.color = colors.primary;
});
// 更新按钮颜色
document.querySelectorAll('.control-btn').forEach(btn => {
btn.style.background = `linear-gradient(to right, ${colors.primary}, ${colors.secondary})`;
btn.style.boxShadow = `0 5px 15px ${colors.secondary}30`;
});
}
// 事件监听
changeTextBtn.addEventListener('click', changeText);
changeSpeedBtn.addEventListener('click', changeSpeed);
changeColorBtn.addEventListener('click', changeColor);
// 鼠标移动效果
document.addEventListener('mousemove', (e) => {
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
// 鼠标移入容器时停止自动旋转
container.addEventListener('mouseenter', () => {
container.style.animationPlayState = 'paused';
});
// 鼠标移出容器时恢复自动旋转
container.addEventListener('mouseleave', () => {
container.style.animationPlayState = 'running';
});
// 初始化
init3DText();
// 添加CSS关键帧
const style = document.createElement('style');
style.textContent = `
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
