HTML5炫酷3D旋转文字动画特效

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值