粉色二次元个人主页源码-胖大海博客资源网

温馨提示：本文最后更新于2025-06-03 16:22:58，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长
HTML源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌸 二次元粉色主页 🌸</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(254, 207, 239, 0.08) 50%, rgba(254, 207, 239, 0.08) 100%);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* 二次元动漫背景 */
        .anime-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('./1.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            z-index: -3;
            filter: blur(0px);
        }

        /* 动漫背景装饰 */
        .anime-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 192, 203, 0.02) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 182, 193, 0.02) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 105, 180, 0.01) 0%, transparent 30%);
            z-index: -2;
        }

        /* 樱花飘落动画 */
        .sakura {
            position: fixed;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(255, 183, 197, 0.25), rgba(255, 145, 164, 0.25));
            border-radius: 50% 0 50% 0;
            animation: fall linear infinite;
            z-index: -1;
        }

        @keyframes fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* 主容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        /* 头部区域 */
        .header {
            text-align: center;
            margin-bottom: 50px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 192, 203, 0.1));
            backdrop-filter: blur(45px);
            border-radius: 25px;
            padding: 40px 20px;
            box-shadow: 0 8px 32px rgba(255, 105, 180, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.06);
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, rgba(255, 154, 158, 0.1), rgba(250, 208, 196, 0.1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: white;
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.05);
            position: relative;
            overflow: hidden;
            border: 3px solid rgba(255, 255, 255, 0.12);
        }

        .avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .avatar::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.06), transparent);
            transform: rotate(45deg);
            animation: shine 3s ease-in-out infinite;
            z-index: 1;
        }

        @keyframes shine {
            0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .name {
            font-size: 2.5em;
            color: #d63384;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .qq-info {
            font-size: 1em;
            color: #8e44ad;
            margin-bottom: 10px;
            opacity: 1;
            font-weight: 500;
        }

        .description {
            font-size: 1.2em;
            color: #8e44ad;
            margin-bottom: 20px;
        }

        /* 导航菜单 */
        .nav-menu {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .nav-item {
            background: linear-gradient(135deg, rgba(255, 154, 158, 0.12), rgba(254, 207, 239, 0.12));
            padding: 12px 25px;
            border-radius: 50px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(35px);
        }

        .nav-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.08);
            background: linear-gradient(135deg, rgba(254, 207, 239, 0.2), rgba(255, 154, 158, 0.2));
        }

        /* 内容区域 */
        .content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 240, 245, 0.12));
            backdrop-filter: blur(45px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(255, 105, 180, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 105, 180, 0.06);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 240, 245, 0.18));
        }

        .card-title {
            font-size: 1.5em;
            color: #d63384;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-content {
            color: #666;
            line-height: 1.6;
        }

        /* 云服务器广告特殊样式 */
        .ad-card {
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(238, 90, 36, 0.2), rgba(255, 159, 243, 0.2));
            color: white;
            border: 3px solid rgba(255, 255, 255, 0.12);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(40px);
        }

        .ad-card::before {
            content: "🔥 热门推荐";
            position: absolute;
            top: -5px;
            right: -30px;
            background: rgba(255, 56, 56, 0.25);
            color: white;
            padding: 5px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            font-weight: bold;
            backdrop-filter: blur(10px);
        }

        .ad-card .card-title {
            color: white;
            font-size: 1.8em;
        }

        .ad-card .card-content {
            color: rgba(255, 255, 255, 0.95);
        }

        .ad-button {
            display: inline-block;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(248, 249, 250, 0.3));
            color: #ff6b6b;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
            backdrop-filter: blur(35px);
        }

        .ad-button:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(248, 249, 250, 0.5));
        }

        /* 社交链接 */
        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 40px 0;
        }

        .social-link {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 154, 158, 0.12), rgba(254, 207, 239, 0.12));
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            font-size: 24px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.03);
            backdrop-filter: blur(35px);
            border: 2px solid rgba(255, 255, 255, 0.06);
        }

        .social-link:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.08);
            background: linear-gradient(135deg, rgba(255, 154, 158, 0.2), rgba(254, 207, 239, 0.2));
        }

        /* 页脚 */
        .footer {
            text-align: center;
            padding: 30px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 192, 203, 0.1));
            backdrop-filter: blur(45px);
            border-radius: 20px;
            color: #8e44ad;
            box-shadow: 0 8px 32px rgba(255, 105, 180, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.06);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .content {
                grid-template-columns: 1fr;
            }
            
            .nav-menu {
                flex-direction: column;
                align-items: center;
            }
            
            .name {
                font-size: 2em;
            }
        }

        /* 浮动心形装饰 */
        .heart {
            position: fixed;
            color: #ff69b4;
            font-size: 20px;
            animation: float 6s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-20px) rotate(5deg); }
            75% { transform: translateY(-10px) rotate(-5deg); }
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 105, 180, 0.3);
            border-radius: 50%;
            border-top-color: #ff69b4;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 二次元动漫背景 -->
    <div class="anime-background"></div>
    
    <!-- 动漫背景装饰 -->
    <div class="anime-bg"></div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 头部区域 -->
        <header class="header">
            <div class="avatar" id="avatar">
                <div class="loading"></div>
            </div>
            <h1 class="name" id="nickname">a'ゞ 胖大海</h1>
            <p class="qq-info" id="qq-info">QQ: <span id="qq-number">941093035</span></p>
            <p class="description">✨ 欢迎来到我的二次元粉色世界 ✨</p>
            
            <nav class="nav-menu">
                <a href="#about" class="nav-item">🎀 关于我</a>
                <a href="#portfolio" class="nav-item">🎨 作品集</a>
                <a href="#contact" class="nav-item">💌 联系我</a>
                <a href="#server" class="nav-item">☁️ 云服务</a>
            </nav>
        </header>

        <!-- 内容区域 -->
        <main class="content">
            <!-- 关于我 -->
            <section id="about" class="card">
                <h2 class="card-title">🎀 关于我</h2>
                <div class="card-content">
                    <p>大家好！我是一个热爱二次元文化的小萌新~ 喜欢粉色、动漫、游戏和一切可爱的东西！</p>
                    <br>
                    <p>🌟 兴趣爱好：看番、画画、编程、游戏</p>
                    <p>💖 最爱颜色：粉色系</p>
                    <p>🎵 喜欢音乐：ACG音乐、J-POP</p>
                    <p>🎮 常玩游戏：原神、明日方舟、碧蓝档案</p>
                </div>
            </section>

            <!-- 我的技能 -->
            <section class="card">
                <h2 class="card-title">✨ 我的技能</h2>
                <div class="card-content">
                    <p>🎨 <strong>设计技能：</strong> Photoshop, Illustrator, Figma</p>
                    <br>
                    <p>💻 <strong>编程语言：</strong> HTML, CSS, JavaScript, Python</p>
                    <br>
                    <p>🎮 <strong>游戏技能：</strong> 原神、明日方舟、碧蓝档案</p>
                    <br>
                    <p>🌸 <strong>其他特长：</strong> 二次元文化、动漫推荐、萌化一切</p>
                </div>
            </section>

            <!-- 云服务器广告 -->
            <!--<section id="server" class="card ad-card">
                <h2 class="card-title">☁️ 免备案SM大宽带云服务器</h2>
                <div class="card-content">
                    <p><strong>🚀 讯度云 - 您的云计算首选伙伴！</strong></p>
                    <br>
                    <p>✅ <strong>免备案：</strong>即买即用，无需繁琐备案流程</p>
                    <p>📡 <strong>大宽带：</strong>高速稳定，满足各种业务需求</p>
                    <p>🔒 <strong>安全可靠：</strong>7×24小时监控，数据安全有保障</p>
                    <p>💰 <strong>价格优惠：</strong>新用户享受特惠价格</p>
                    <br>
                    <p><em>无论是个人网站、企业应用还是游戏服务器，讯度云都能为您提供最优质的云计算服务！</em></p>
                    
                    <a href="https://pdha.top/" target="_blank" class="ad-button">
                        🌟 立即购买云服务器 🌟
                    </a>
                </div>
            </section>-->

            <!-- 最近动态 -->
            <section class="card">
                <h2 class="card-title">📝 最近动态</h2>
                <div class="card-content">
                    <p>🎉 <strong>2024.01.15</strong> - 完成了新的个人主页设计！</p>
                    <br>
                    <p>🎨 <strong>2024.01.10</strong> - 学会了CSS动画制作</p>
                    <br>
                    <p>🎮 <strong>2024.01.05</strong> - 原神抽到了心海！好开心~</p>
                    <br>
                    <p>📚 <strong>2024.01.01</strong> - 新年快乐！今年要更加努力学习!</p>
                </div>
            </section>

            <!-- 联系方式 -->
            <section id="contact" class="card">
                <h2 class="card-title">💌 联系我</h2>
                <div class="card-content">
                    <p>想要和我交流二次元话题或者技术问题吗？欢迎通过以下方式联系我：</p>
                    <br>
                    <p>📧 邮箱：example@email.com</p>
                    <p>💬 QQ：<span id="contact-qq">941093035</span></p>
                    <p>🐦 微博：@微博</p>
                    <p>📱 微信：加好友请备注来源哦~</p>
                </div>
            </section>

            <!-- 推荐番剧 -->
            <section class="card">
                <h2 class="card-title">🎬 推荐番剧</h2>
                <div class="card-content">
                    <p>🌸 <strong>春季必看：</strong>《樱花庄的宠物女孩》</p>
                    <br>
                    <p>💖 <strong>治愈系：</strong>《K-ON!》轻音部</p>
                    <br>
                    <p>⚔️ <strong>战斗番：</strong>《鬼灭之刃》</p>
                    <br>
                    <p>🎭 <strong>日常番：</strong>《小林家的龙女仆》</p>
                </div>
            </section>
        </main>

        <!-- 社交链接 -->
        <div class="social-links">
            <a href="https://pdha.top/" target="_blank" class="social-link" title="123">Q</a>
            <a href="https://pdha.top/" target="_blank" class="social-link" title="123">💬</a>
            <a href="https://pdha.top/" target="_blank" class="social-link" title="123">📱</a>
            <a href="https://pdha.top/" target="_blank" class="social-link" title="123">📧</a>
        </div>

        <!-- 页脚 -->
        <footer class="footer">
            <p>💖 Made with Love by <span id="footer-nickname">二次元小萌新</span> 💖</p>
            <p>🌸 感谢您的访问，祝您每天都充满粉色的美好心情！🌸</p>
            <br>
            <p><small>Powered by 胖大海 | <a href="https://pdha.top/" target="_blank" style="color: #d63384;">博客</a></small></p>
        </footer>
    </div>

    <script>
        // QQ号码配置
        const QQ_NUMBER = '941093035';
        const FIXED_NICKNAME = "a'ゞ PDHA.TOP";
        
        // 更新页面中的QQ号码
        function updateQQNumber() {
            document.getElementById('qq-number').textContent = QQ_NUMBER;
            document.getElementById('contact-qq').textContent = QQ_NUMBER;
        }

        // 直接设置用户信息，不使用接口
        function loadUserInfo() {
            // 设置固定昵称
            document.getElementById('nickname').textContent = FIXED_NICKNAME;
            document.getElementById('footer-nickname').textContent = FIXED_NICKNAME;
            
            // 加载高清头像
            const avatarImg = document.createElement('img');
            // 使用更高清的头像参数
            avatarImg.src = `https://q1.qlogo.cn/g?b=qq&nk=${QQ_NUMBER}&s=640&t=${Date.now()}`;
            avatarImg.alt = 'QQ头像';
            
            // 设置图片质量优化
            avatarImg.style.imageRendering = 'crisp-edges';
            avatarImg.style.imageRendering = '-webkit-optimize-contrast';
            
            avatarImg.onload = function() {
                document.getElementById('avatar').innerHTML = '';
                document.getElementById('avatar').appendChild(avatarImg);
                console.log('头像加载成功');
            };
            
            avatarImg.onerror = function() {
                // 尝试其他高清头像源
                this.src = `https://q2.qlogo.cn/headimg_dl?dst_uin=${QQ_NUMBER}&spec=640`;
                this.onerror = function() {
                    // 最终备用方案
                    this.src = `https://thirdqq.qlogo.cn/g?b=qq&nk=${QQ_NUMBER}&s=640`;
                    this.onerror = function() {
                        document.getElementById('avatar').innerHTML = '🌸';
                    };
                };
            };
        }

        // 创建樱花飘落效果
        function createSakura() {
            for (let i = 0; i < 15; i++) {
                const sakura = document.createElement('div');
                sakura.className = 'sakura';
                sakura.style.left = Math.random() * 100 + 'vw';
                sakura.style.animationDuration = Math.random() * 3 + 2 + 's';
                sakura.style.animationDelay = Math.random() * 2 + 's';
                document.body.appendChild(sakura);
                
                // 5秒后移除元素
                setTimeout(() => {
                    if (sakura.parentNode) {
                        sakura.parentNode.removeChild(sakura);
                    }
                }, 5000);
            }
        }

        // 创建浮动心形
        function createHearts() {
            const hearts = ['💖', '💕', '💗', '💓', '💝', '🌸', '🎀', '✨'];
            for (let i = 0; i < 6; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)];
                heart.style.left = Math.random() * 100 + 'vw';
                heart.style.top = Math.random() * 100 + 'vh';
                heart.style.animationDelay = Math.random() * 6 + 's';
                document.body.appendChild(heart);
            }
        }

        // 页面加载完成后执行
        window.addEventListener('load', function() {
            updateQQNumber();
            loadUserInfo();
            createSakura();
            createHearts();
            
            // 每隔3秒创建新的樱花
            setInterval(createSakura, 3000);
        });

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 鼠标跟随效果
        document.addEventListener('mousemove', function(e) {
            if (Math.random() < 0.08) { // 8% 概率生成粒子
                const particles = ['✨', '💖', '🌸', '💕'];
                const particle = document.createElement('div');
                particle.innerHTML = particles[Math.floor(Math.random() * particles.length)];
                particle.style.position = 'fixed';
                particle.style.left = e.clientX + 'px';
                particle.style.top = e.clientY + 'px';
                particle.style.fontSize = '12px';
                particle.style.color = '#ff69b4';
                particle.style.pointerEvents = 'none';
                particle.style.zIndex = '9999';
                particle.style.animation = 'fadeOut 2s ease-out forwards';
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    if (particle.parentNode) {
                        particle.parentNode.removeChild(particle);
                    }
                }, 2000);
            }
        });

        // 添加淡出动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeOut {
                0% { opacity: 1; transform: scale(1) translateY(0); }
                100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>
背景图1.png
------本页内容已结束，喜欢请分享------
感谢您的来访，获取更多精彩文章请收藏本站。

------关注微信公众号：胖大海TuT------
版权声明 1 本网站名称：胖大海博客资源网
2 本站永久网址：https://www.pdha.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ941093035进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END