VIP购买提示组件

我将为您创建一个固定在左下角的VIP购买提示，包含抖动和闪烁效果以吸引用户点击。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP购买提示</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        /* VIP提示样式 */
        .vip-prompt {
            position: fixed;
            left: 20px;
            bottom: 20px;
            z-index: 999;
            background: linear-gradient(135deg, #ffcc33, #ff9933);
            color: #fff;
            padding: 12px 20px;
            border-radius: 50px;
            box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            animation: shake 2.5s infinite, glow 1.5s infinite alternate;
            font-weight: bold;
        }

        .vip-prompt:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(255, 153, 51, 0.5);
        }

        /* VIP图标 */
        .vip-icon {
            font-size: 20px;
            animation: rotate 2s infinite;
        }

        /* 抖动动画 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
            20%, 40%, 60%, 80% { transform: translateX(3px); }
            95% { transform: translateX(0); }
        }

        /* 旋转动画 */
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(10deg); }
            75% { transform: rotate(-10deg); }
            100% { transform: rotate(0deg); }
        }

        /* 发光动画 */
        @keyframes glow {
            from {
                box-shadow: 0 0 5px #ff9933, 0 0 10px #ff9933;
            }
            to {
                box-shadow: 0 0 15px #ff9933, 0 0 20px #ff9933;
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .vip-prompt {
                padding: 10px 16px;
                left: 15px;
                bottom: 15px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <!-- VIP购买提示 -->
    <div class="vip-prompt" id="vipPrompt">
        <span class="vip-icon">👑</span>
        <span>升级VIP，享受更多特权！</span>
    </div>

    <script>
        // 点击事件处理
        document.getElementById('vipPrompt').addEventListener('click', function() {
            // 这里可以添加跳转到VIP购买页面的逻辑
            alert('即将跳转到VIP购买页面');
            // window.location.href = 'vip-purchase.html';
        });

        // 定时增强动画效果，增加用户注意力
        setInterval(function() {
            const vipPrompt = document.getElementById('vipPrompt');
            vipPrompt.style.animation = 'none';
            
            // 触发重绘
            void vipPrompt.offsetWidth;
            
            // 恢复动画
            vipPrompt.style.animation = 'shake 2.5s infinite, glow 1.5s infinite alternate';
        }, 10000); // 每10秒重置一次动画
    </script>
</body>
</html>

功能特点：

固定位置：提示框固定在左下角，不影响主要内容浏览
抖动效果：使用CSS shake 动画让提示框持续抖动吸引注意
闪烁发光：通过 glow 动画让按钮边缘发光闪烁
交互反馈：鼠标悬停时会有上浮效果，增强点击欲望
自适应设计：在不同屏幕尺寸下调整大小和边距
优雅设计：渐变背景色、圆角和阴影，提升视觉吸引力
点击处理：点击后可跳转到VIP购买页面
注意力恢复：每10秒重置一次动画，确保用户注意力

您可以根据需要调整文本内容、颜色和动画参数，或者集成到您的现有网页中。

VIP购买提示组件

VIP购买提示组件

功能特点：

相关推荐

无数据提示模块 HTML 代码