Animate.css 文字特效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animate.css 文字特效</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            overflow-x: hidden;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .header h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 300% 300%;
            animation: gradientBG 5s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .effects-container {
            width: 100%;
            max-width: 800px;
        }
        
        .effect-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .effect-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .effect-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #fbc2eb;
        }
        
        .effect-demo {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            margin: 20px 0;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }
        
        .effect-demo:hover {
            transform: scale(1.05);
        }
        
        .effect-desc {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }
        
        .footer {
            margin-top: 50px;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        
        .footer a {
            color: #fbc2eb;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer a:hover {
            color: #a6c1ee;
            text-decoration: underline;
        }
        
        /* 自定义动画延迟 */
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }
        .delay-5 { animation-delay: 1s; }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .effect-title {
                font-size: 1.3rem;
            }
            
            .effect-demo {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="animate__animated animate__fadeInDown">Animate.css 文字特效</h1>
        <p class="animate__animated animate__fadeIn animate__delay-1s">点击下方文字查看不同动画效果</p>
    </div>
    
    <div class="effects-container">
        <!-- 特效1 -->
        <div class="effect-item animate__animated animate__fadeInLeft delay-1">
            <h3 class="effect-title">弹跳入场</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__bounceIn')">
                弹跳文字效果
            </div>
            <p class="effect-desc">文字像球一样弹跳进入视线,充满活力和趣味性,适合强调重要内容。</p>
        </div>
        
        <!-- 特效2 -->
        <div class="effect-item animate__animated animate__fadeInRight delay-2">
            <h3 class="effect-title">闪烁强调</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__flash')">
                闪烁文字效果
            </div>
            <p class="effect-desc">文字快速闪烁,立即吸引用户注意力,适合警示或特别提示内容。</p>
        </div>
        
        <!-- 特效3 -->
        <div class="effect-item animate__animated animate__fadeInLeft delay-3">
            <h3 class="effect-title">橡皮筋拉伸</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__rubberBand')">
                橡皮筋效果
            </div>
            <p class="effect-desc">文字像橡皮筋一样拉伸回弹,有趣且引人注目,适合按钮或可点击元素。</p>
        </div>
        
        <!-- 特效4 -->
        <div class="effect-item animate__animated animate__fadeInRight delay-4">
            <h3 class="effect-title">翻转进入</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__flipInX')">
                翻转文字效果
            </div>
            <p class="effect-desc">文字沿X轴翻转进入,带来3D立体感,适合展示卡片或图片标题。</p>
        </div>
        
        <!-- 特效5 -->
        <div class="effect-item animate__animated animate__fadeInLeft delay-5">
            <h3 class="effect-title">放大抖动</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__tada')">
                抖动文字效果
            </div>
            <p class="effect-desc">文字放大并轻微抖动,营造庆祝氛围,适合成功提示或成就展示。</p>
        </div>
        
        <!-- 特效6 -->
        <div class="effect-item animate__animated animate__fadeInRight delay-1">
            <h3 class="effect-title">渐显光晕</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__lightSpeedInRight')">
                光晕文字效果
            </div>
            <p class="effect-desc">文字带着光晕从右侧快速滑入,极具科技感和速度感。</p>
        </div>
        
        <!-- 特效7 -->
        <div class="effect-item animate__animated animate__fadeInLeft delay-2">
            <h3 class="effect-title">旋转下落</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__rotateInDownLeft')">
                旋转文字效果
            </div>
            <p class="effect-desc">文字旋转着从上方落下,优雅且引人注目,适合产品特性展示。</p>
        </div>
        
        <!-- 特效8 -->
        <div class="effect-item animate__animated animate__fadeInRight delay-3">
            <h3 class="effect-title">弹跳放大</h3>
            <div class="effect-demo" onclick="playAnimation(this, 'animate__bounceInUp')">
                弹跳放大效果
            </div>
            <p class="effect-desc">文字从下方弹跳进入并放大,充满活力,适合欢迎信息或标题。</p>
        </div>
    </div>
    
    <div class="footer animate__animated animate__fadeIn animate__delay-2s">
    </div>

    <script>
        // 播放动画函数
        function playAnimation(element, animation) {
            // 移除之前的动画类
            element.classList.remove('animate__animated');
            for (let className of element.classList) {
                if (className.startsWith('animate__')) {
                    element.classList.remove(className);
                }
            }
            
            // 强制重绘
            void element.offsetWidth;
            
            // 添加新的动画类
            element.classList.add('animate__animated', animation);
            
            // 动画结束后移除类
            element.addEventListener('animationend', function() {
                element.classList.remove('animate__animated', animation);
            }, {once: true});
        }
        
        // 页面加载时随机播放一些动画
        document.addEventListener('DOMContentLoaded', function() {
            const demos = document.querySelectorAll('.effect-demo');
            
            // 延迟执行,确保初始动画完成
            setTimeout(() => {
                demos.forEach((demo, index) => {
                    setTimeout(() => {
                        const animations = [
                            'animate__bounceIn', 
                            'animate__flash', 
                            'animate__rubberBand', 
                            'animate__flipInX', 
                            'animate__tada',
                            'animate__lightSpeedInRight',
                            'animate__rotateInDownLeft',
                            'animate__bounceInUp'
                        ];
                        playAnimation(demo, animations[index]);
                    }, index * 200);
                });
            }, 1500);
        });
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值