【提问】有木有这种会员页面代码-zibll综合交流社区-zibll子比主题-WordPress主题模板-zibll子比主题

回答6
- 彬红茶0
  来我网站免费拿 https://blog.redcha.cn/27.html
  昨天广东回复
- xingyu0
  https://www.tfbkw.com/vips
  4天前山东回复




    
    
    VIP会员中心 - 尊享特权
    
    
        /* 全局样式 */
        :root {
            --primary: #0066ff;
            --secondary: #ff00cc;
            --accent: #00ffcc;
            --dark: #0f172a;
            --light: #f8fafc;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: var(--light);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        /* 粒子背景容器 */
        #tsparticles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        /* 页面容器 */
        .vip-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px 20px;
            position: relative;
            z-index: 10;
        }
        
        /* 标题样式 */
        .vip-title {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        .vip-title h1 {
            font-size: 3.5rem;
            background: linear-gradient(90deg, var(--secondary), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(255, 0, 204, 0.3);
            margin-bottom: 15px;
            letter-spacing: -1px;
        }
        
        .vip-title p {
            font-size: 1.2rem;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        /* 3D会员卡样式 */
        .vip-card-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 60px;
        }
        
        .vip-card {
            width: 300px;
            height: 420px;
            perspective: 1000px;
        }
        
        .vip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .vip-card:hover .vip-card-inner {
            transform: rotateY(180deg);
        }
        
        /* 卡片正面和背面共享的样式 */
        .vip-card-front, .vip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            box-sizing: border-box;
        }
        
        /* 卡片正面 */
        .vip-card-front {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4);
        }
        
        /* 卡片背面 */
        .vip-card-back {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            transform: rotateY(180deg);
            color: white;
            font-size: 18px;
            text-align: center;
            line-height: 1.6;
            box-shadow: 0 10px 30px rgba(255, 0, 204, 0.4);
        }
        
        /* 卡片内容样式 */
        .card-icon {
            font-size: 60px;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .card-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .card-price {
            font-size: 42px;
            font-weight: 800;
            margin: 20px 0;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }
        
        .card-price small {
            font-size: 18px;
            font-weight: 500;
        }
        
        .card-desc {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 25px;
        }
        
        .card-badge {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* 特权列表 */
        .privilege-list {
            list-style-type: none;
            width: 100%;
            padding: 0;
            text-align: left;
        }
        
        .privilege-list li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 25px;
            font-size: 16px;
        }
        
        .privilege-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: bold;
        }
        
        /* 价格切换器 */
        .vip-duration {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .duration-selector {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .duration-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid var(--primary);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 18px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .duration-btn.active, .duration-btn:hover {
            background: linear-gradient(90deg, var(--secondary), var(--primary));
            box-shadow: 0 0 15px var(--secondary), 0 0 30px var(--primary);
            transform: translateY(-3px);
        }
        
        .duration-btn em {
            display: block;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            color: var(--accent);
            margin-top: 5px;
        }
        
        /* 会员特权区域 */
        .vip-features {
            max-width: 1200px;
            margin: 0 auto 60px;
            background: rgba(30, 41, 59, 0.6);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        .feature-item {
            background: rgba(15, 23, 42, 0.7);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .feature-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
            border-color: rgba(0, 102, 255, 0.3);
        }
        
        .feature-icon {
            font-size: 50px;
            margin-bottom: 20px;
            animation: float 3s infinite ease-in-out;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .feature-item h4 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--accent);
        }
        
        .feature-item p {
            font-size: 16px;
            color: #cbd5e1;
            line-height: 1.6;
        }
        
        /* 开通方式区域 */
        .vip-payment {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(30, 41, 59, 0.6);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .payment-method {
            margin-bottom: 30px;
        }
        
        .payment-method h4 {
            font-size: 20px;
            margin-bottom: 20px;
            color: var(--accent);
            text-align: center;
        }
        
        .points-display {
            font-size: 18px;
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }
        
        .blink {
            animation: blink 1s infinite;
            font-weight: bold;
            color: var(--accent);
        }
        
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .card-redeem {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }
        
        .card-redeem input {
            flex: 1;
            padding: 15px;
            border-radius: 50px;
            border: none;
            background: rgba(0, 0, 0, 0.3);
            color: white;
            outline: none;
        }
        
        .card-redeem input:focus {
            box-shadow: 0 0 10px var(--primary);
        }
        
        .payment-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        
        .payment-btn {
            background: linear-gradient(90deg, var(--secondary), var(--primary));
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .payment-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px var(--secondary), 0 0 30px var(--primary);
        }
        
        .wechat-pay {
            background: linear-gradient(90deg, #07c160, #09bb07);
        }
        
        .alipay {
            background: linear-gradient(90deg, #1677ff, #1890ff);
        }
        
        .payment-btn i {
            font-size: 24px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .vip-title h1 {
                font-size: 2.5rem;
            }
            
            .vip-card {
                width: 100%;
                max-width: 300px;
            }
            
            .duration-selector {
                flex-direction: column;
                align-items: center;
            }
            
            .payment-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .payment-btn {
                width: 100%;
            }
        }
    


    
    
    
    
        
        
            VIP会员中心
            解锁专属特权，畅享尊贵体验！会员独享内容下载加速、专属客服、高级功能等多项特权
        
        
        
        
            
            
                
                    
                        🌟
                        基础会员
                        ￥29/月
                        解锁基础特权
                        人气之选
                    
                    
                        基础特权
                        
                            付费资源免费下载
                            隐藏文章解锁
                            普通客服支持
                            每日10次下载
                            基础标识展示
                        
                    
                
            
            
            
            
                
                    
                        🔥
                        高级会员
                        ￥79/季
                        尊享高级特权
                        超值推荐
                    
                    
                        高级特权
                        
                            所有基础会员特权
                            金色昵称标识
                            专属勋章墙
                            高优先级客服
                            双倍积分奖励
                            无限下载次数
                        
                    
                
            
            
            
            
                
                    
                        💎
                        尊享会员
                        ￥299/年
                        顶级尊享特权
                        尊贵之选
                    
                    
                        尊享特权
                        
                            所有高级会员特权
                            专属身份标识
                            免审核发帖
                            独家表情包
                            高级功能优先体验
                            年度专属礼包
                            赠送500积分
                        
                    
                
            
        
        
        
        
            选择套餐
            
                月卡
                季卡 限时8折
                年卡 赠500积分
            
        
        
        
        
            会员尊享特权
            
                
                    🔓
                    内容特权
                    付费资源免费下载、隐藏文章解锁、独家教程访问
                
                
                    🏅
                    身份特权
                    金色昵称标识、专属勋章墙、高级用户标签
                
                
                    ⚡
                    功能特权
                    高优先级客服、双倍积分奖励、下载加速
                
                
                    💬
                    社区特权
                    免审核发帖、独家表情包、高级用户组
                
            
        
        
        
        
            开通会员
            
            
            
                积分兑换
                
                    您有 850 积分，可兑换月卡
                
                
                    积分兑换
                
            
            
            
            
                卡密充值
                
                    
                    立即激活
                
            
            
            
            
                在线支付
                
                    
                        💳 微信支付
                    
                    
                        💳 支付宝
                    
                
            
        
    

    
        // 初始化粒子背景 - 星星跟随鼠标效果
        document.addEventListener('DOMContentLoaded', function() {
            tsParticles.load("tsparticles", {
                fullScreen: {
                    enable: true,
                    zIndex: -1
                },
                particles: {
                    color: {
                        value: ["#ffe234", "#ffa534"]
                    },
                    move: {
                        direction: "none",
                        enable: true,
                        outModes: "destroy",
                        speed: 6
                    },
                    number: {
                        density: {
                            enable: true
                        },
                        value: 80
                    },
                    opacity: {
                        value: {
                            min: 0.1,
                            max: 1
                        },
                        animation: {
                            enable: true,
                            speed: 3,
                            startValue: "max",
                            destroy: "min"
                        }
                    },
                    shape: {
                        type: "star"
                    },
                    size: {
                        value: {
                            min: 1,
                            max: 3
                        }
                    }
                },
                interactivity: {
                    events: {
                        onHover: {
                            enable: true,
                            mode: "trail"
                        }
                    },
                    modes: {
                        trail: {
                            delay: 0.005,
                            pauseOnStop: false,
                            quantity: 5
                        }
                    }
                }
            });
            
            // 价格切换功能
            const durationBtns = document.querySelectorAll('.duration-btn');
            const prices = {
                '1': {
                    '基础会员': 29,
                    '高级会员': 79,
                    '尊享会员': 299
                },
                '3': {
                    '基础会员': 76,
                    '高级会员': 199,
                    '尊享会员': 799
                },
                '12': {
                    '基础会员': 299,
                    '高级会员': 699,
                    '尊享会员': 2599
                }
            };
            
            durationBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 更新按钮状态
                    durationBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取选中的月份
                    const months = this.getAttribute('data-months');
                    
                    // 更新卡片价格
                    document.querySelectorAll('.vip-card').forEach(card => {
                        const title = card.querySelector('.card-title').textContent;
                        const priceElement = card.querySelector('.card-price');
                        const price = prices[months][title];
                        
                        // 添加粒子动画效果
                        const particleCount = 15;
                        tsParticles.createEmitter({
                            startCount: particleCount,
                            position: {
                                x: priceElement.getBoundingClientRect().left + priceElement.offsetWidth/2,
                                y: priceElement.getBoundingClientRect().top + priceElement.offsetHeight/2
                            },
                            size: {
                                width: 0,
                                height: 0
                            },
                            rate: {
                                delay: 0,
                                quantity: 0
                            },
                            particles: {
                                color: {
                                    value: ["#ff00cc", "#0066ff"]
                                },
                                move: {
                                    angle: {
                                        offset: 0,
                                        value: 35
                                    },
                                    enable: true,
                                    gravity: {
                                        enable: true,
                                        acceleration: 10
                                    },
                                    speed: 25,
                                    decay: 0.95,
                                    direction: "outside",
                                    random: true,
                                    straight: false,
                                    outModes: "destroy"
                                },
                                number: {
                                    value: 0
                                },
                                opacity: {
                                    value: 1
                                },
                                shape: {
                                    type: ["circle", "square"]
                                },
                                size: {
                                    value: {
                                        min: 2,
                                        max: 4
                                    }
                                }
                            }
                        });
                        
                        // 更新价格
                        priceElement.innerHTML = `￥${price}/${months>1?months/12>=1?'年':'个月':''}${months==12?'':months>1?'':''}`;
                    });
                });
            });
            
            // 积分兑换按钮事件
            document.getElementById('exchange-btn').addEventListener('click', function() {
                this.innerHTML = "兑换中...";
                setTimeout(() => {
                    this.innerHTML = "兑换成功！";
                    this.classList.add('wechat-pay');
                    this.disabled = true;
                    
                    // 烟花庆祝效果
                    tsParticles.createEmitter({
                        startCount: 50,
                        position: {
                            x: 50,
                            y: 50
                        },
                        size: {
                            width: 0,
                            height: 0
                        },
                        rate: {
                            delay: 0,
                            quantity: 0
                        },
                        particles: {
                            color: {
                                value: ["#ff0000", "#ffff00", "#00ff00", "#0000ff"]
                            },
                            move: {
                                enable: true,
                                gravity: {
                                    enable: true
                                },
                                speed: 10,
                                decay: 0.1,
                                direction: "top",
                                random: true,
                                straight: false,
                                outModes: {
                                    default: "destroy",
                                    bottom: "none"
                                }
                            },
                            number: {
                                value: 0
                            },
                            opacity: {
                                value: 1
                            },
                            shape: {
                                type: "circle"
                            },
                            size: {
                                value: {
                                    min: 3,
                                    max: 5
                                }
                            }
                        }
                    });
                }, 1000);
            });
        });