情侣网页源码 (大作业html)

peter123123123123
于 2025-05-17 22:09:15 发布
阅读量418
点赞数 3
CC 4.0 BY-SA版权
分类专栏：前端demo 前端文章标签：课程设计 html 前端
本文链接：https://blog.youkuaiyun.com/Pan_peter/article/details/148034634
前端同时被 2 个专栏收录
20 篇文章
订阅专栏
前端demo
14 篇文章
订阅专栏
「情侣网页」
链接：https://pan.quark.cn/s/6b35b2b5a1d7

链接：https://pan.quark.cn/s/6b35b2b5a1d7

链接：https://pan.quark.cn/s/6b35b2b5a1d7
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜蜜主页 💕 - 我们的二人世界</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <style>
        /* 0. CSS 重置与基础设定 */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #FFF5FA; /* 淡雅的背景色 */
            overflow-x: hidden; /* 防止水平滚动 */
        }

        /* 1. 响应式排版与容器 */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 0;
        }

        h1, h2, h3 {
            color: #E91E63; /* 主题粉色 */
            margin-bottom: 0.8em;
            font-weight: 600;
        }
        
        p {
            margin-bottom: 1em;
            color: #555;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* 2. 导航栏  Navbar 🎨 */
        .navbar {
            background: linear-gradient(135deg, #FF8FAB 0%, #FB607F 100%); /* 渐变粉色 */
            padding: 1em 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: background-color 0.3s ease;
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0;
            padding-bottom: 0;
        }

        .logo {
            font-size: 1.8em;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            animation: fadeInDown 1s ease-out;
        }

        .nav-links {
            list-style: none;
            display: flex;
        }

        .nav-links li {
            margin-left: 25px;
            animation: fadeInDown 1s ease-out 0.2s;
            animation-fill-mode: backwards; /* Ensure it starts from invisible if animation is delayed */
        }
        
        .nav-links li:first-child {
            animation-delay: 0.2s;
        }
        .nav-links li:nth-child(2) {
            animation-delay: 0.4s;
        }
        .nav-links li:nth-child(3) {
            animation-delay: 0.6s;
        }


        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-size: 1.1em;
            padding: 0.5em 0.8em;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .nav-links a:hover, .nav-links a.active {
            background-color: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }
        
        /* 移动端导航栏 */
        .menu-toggle {
            display: none; /* 默认隐藏 */
            font-size: 1.5em;
            color: #fff;
            background: none;
            border: none;
            cursor: pointer;
        }


        /* 3. 英雄区域 Hero Section 🌟 */
        .hero {
            background: url('img/bg\ -\ 副本.jpg') no-repeat center center/cover;
            /* 备用背景色，如果图片加载失败 */
            background-color: #FFCDEA; /* 柔和粉色 */
            color: #fff;
            text-align: center;
            padding: 80px 20px;
            position: relative;
            overflow: hidden; /* For pseudo-element overlay */
        }

        .hero::before { /* 添加一层蒙版让文字更清晰 */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .hero-content {
            position: relative; /* 高于蒙版 */
            z-index: 2;
        }

        .hero h1 {
            font-size: 3.5em;
            margin-bottom: 0.3em;
            color: #fff;
            font-weight: 700;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
        }

        .hero .subtitle {
            font-size: 1.5em;
            margin-bottom: 1.5em;
            color: #f0f0f0;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
        }

        .hero-buttons .btn {
            background-color: #FF69B4; /* 亮粉色 */
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 25px;
            font-size: 1.1em;
            margin: 0 10px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .hero-buttons .btn:hover {
            background-color: #FF1493; /* 深一点的粉色 */
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        .hero-buttons .btn-secondary {
            background-color: transparent;
            border: 2px solid #fff;
        }
        .hero-buttons .btn-secondary:hover {
            background-color: rgba(255,255,255,0.2);
        }


        /* 4. "我们の故事" Our Story Section 📜 */
        .our-story {
            padding: 60px 0;
            background-color: #FFFFFF; /* 白色背景，突出内容 */
        }
        .our-story .container {
            text-align: center;
        }
        .our-story h2 {
            font-size: 2.8em;
        }
        .story-intro {
            font-size: 1.2em;
            max-width: 700px;
            margin: 0 auto 30px auto;
            color: #4A4A4A;
        }
        .story-timeline {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px; /* 间隙 */
        }
        .timeline-item {
            background: #FFF0F5; /* 淡紫色背景 */
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(233, 30, 99, 0.1); /* 粉色阴影 */
            width: calc(33.333% - 20px); /* 减去部分间隙 */
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .timeline-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(233, 30, 99, 0.2);
        }
        .timeline-item h3 {
            font-size: 1.5em;
            color: #C71585; /* 中紫罗兰红 */
            margin-bottom: 10px;
        }
        .timeline-item p {
            font-size: 0.95em;
            color: #585858;
        }
        .timeline-date {
            font-size: 0.9em;
            color: #E91E63;
            font-weight: bold;
            margin-bottom: 5px;
        }


        /* 5. "甜蜜瞬间" Sweet Moments Section (Gallery Teaser) 📸 */
        .sweet-moments {
            padding: 60px 0;
            background-color: #FFE4E1; /* Misty Rose */
        }
        .sweet-moments .container {
            text-align: center;
        }
        .sweet-moments h2 {
            font-size: 2.8em;
            color: #DB7093; /* PaleVioletRed */
        }
        .gallery-teaser {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        .moment-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .moment-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        .moment-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
        }
        .moment-card-caption {
            padding: 15px;
            font-size: 1.1em;
            font-weight: 500;
            color: #BF5A7F; /* A bit darker pink for text */
        }
        .cta-button {
            display: inline-block;
            background-color: #FF69B4;
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 25px;
            font-size: 1.1em;
            margin-top: 30px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .cta-button:hover {
            background-color: #FF1493;
            transform: translateY(-2px);
        }

        /* 6. "未来期许" Future Wishes Section 展望 */
        .future-wishes {
            padding: 60px 0;
            background-color: #F0F8FF; /* AliceBlue */
        }
        .future-wishes .container {
            text-align: center;
        }
        .future-wishes h2 {
            font-size: 2.8em;
            color: #4682B4; /* SteelBlue */
        }
        .wishes-list {
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Align items to the top if they have different heights */
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 30px;
            text-align: left;
        }
        .wish-item {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(70, 130, 180, 0.1); /* SteelBlue shadow */
            width: calc(50% - 40px); /* Adjust width for two items per row, considering gap */
            min-width: 280px; /* Minimum width before wrapping */
            border-left: 5px solid #5D9CEC; /* Nice blue accent */
        }
        .wish-item h3 {
            font-size: 1.6em;
            color: #3A7CA5;
            margin-bottom: 10px;
        }
        .wish-item p {
            font-size: 1em;
            color: #555;
            line-height: 1.7;
        }


        /* 7. 页脚 Footer 💌 */
        .site-footer {
            background-color: #4A4A4A; /* 深灰色页脚 */
            color: #E0E0E0;
            text-align: center;
            padding: 30px 0;
            font-size: 0.95em;
        }
        .site-footer p {
            margin-bottom: 0.5em;
            color: #E0E0E0;
        }
        .site-footer a {
            color: #FFB6C1; /* LightPink */
            text-decoration: none;
        }
        .site-footer a:hover {
            text-decoration: underline;
        }

        /* 8. 响应式设计 Media Queries 📱💻 */
        @media (max-width: 992px) {
            .timeline-item {
                width: calc(50% - 15px); /* 两列布局 */
            }
            .wish-item {
                width: calc(50% - 25px);
            }
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.8em;
            }
            .hero .subtitle {
                font-size: 1.2em;
            }
            .nav-links {
                display: none; /* 隐藏链接 */
                flex-direction: column;
                width: 100%;
                position: absolute;
                top: 70px; /* 根据navbar高度调整 */
                left: 0;
                background: linear-gradient(135deg, #FB607F 0%, #FF8FAB 100%);
                padding: 10px 0;
            }
            .nav-links.active {
                display: flex; /* 点击后显示 */
            }
            .nav-links li {
                margin: 10px 0;
                text-align: center;
                animation: none; /* 移除桌面端的动画 */
            }
            .menu-toggle {
                display: block; /* 显示汉堡菜单按钮 */
            }

            .timeline-item {
                width: calc(100% - 10px); /* 单列布局 */
            }
            .story-timeline {
                gap: 15px;
            }

            .gallery-teaser {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 15px;
            }
            .wish-item {
                width: 100%;
            }
            .wishes-list {
                gap: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 2.2em;
            }
            .hero .subtitle {
                font-size: 1em;
            }
            .hero-buttons .btn {
                padding: 10px 20px;
                font-size: 1em;
                margin: 5px;
            }
            .hero-buttons {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
             .our-story h2, .sweet-moments h2, .future-wishes h2 {
                font-size: 2.2em;
            }
        }
        
        /* 9. GSAP 动画辅助类 (如果需要，例如隐藏元素以便动画进入) */
        .gsap-reveal {
            opacity: 0;
            transform: translateY(30px);
        }
        .gsap-fade-in {
            opacity: 0;
        }
        .gsap-hero-title-char { /* For letter animation */
            display: inline-block;
            opacity: 0;
            transform: translateY(-30px) rotateX(90deg) scale(0.5);
        }


    </style>
</head>
<body>


    <header class="navbar">
        <div class="container">
            <a href="index.html" class="logo">爱の印记 💖</a>
            <button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation">☰</button>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html" class="active">甜蜜主页 🏠</a></li>
                <li><a href="timeline.html" >时光轴 ⏳</a></li>
                <li><a href="album.html">甜蜜相册 📸</a></li> </ul>
        </div>
    </header>

    <section class="hero">
        <div class="hero-content">
            <h1 id="heroTitle">我们的温馨小窝 </h1>
            <p class="subtitle gsap-fade-in">记录点滴，分享爱意，携手走过每一天。🥰</p>
            <div class="hero-buttons">
                <a href="#our-story" class="btn gsap-fade-in">探索我们的故事 👇</a>
                <a href="#sweet-moments" class="btn btn-secondary gsap-fade-in">欣赏甜蜜瞬间 ✨</a>
            </div>
        </div>
    </section>

    <section id="our-story" class="our-story">
        <div class="container">
            <h2 class="gsap-reveal">我们の故事 📜</h2>
            <p class="story-intro gsap-reveal">从相遇到相知，从心动到相守，每一步都是爱的证明。💕</p>
            <div class="story-timeline">
                <div class="timeline-item gsap-reveal">
                    <p class="timeline-date">2022年5月20日</p>
                    <h3>初次相遇的悸动 ❤️</h3>
                    <p>在一个阳光明媚的午后，我们不期而遇，缘分悄然开始...</p>
                </div>
                <div class="timeline-item gsap-reveal">
                    <p class="timeline-date">2023年2月14日</p>
                    <h3>第一次浪漫约会 🌹</h3>
                    <p>情人节的烛光晚餐，空气中都弥漫着甜甜的味道。</p>
                </div>
                <div class="timeline-item gsap-reveal">
                     <p class="timeline-date">2024年纪念日</p>
                    <h3>携手周年庆 🥂</h3>
                    <p>回顾一起走过的日子，充满了欢笑与感动，期待更多美好。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="sweet-moments" class="sweet-moments">
        <div class="container">
            <h2 class="gsap-reveal">甜蜜瞬间 📸</h2>
            <p class="story-intro gsap-reveal">生活中的小确幸，都是我们爱情的见证。🖼️</p>
            <div class="gallery-teaser">
                <div class="moment-card gsap-reveal">
                    <img src="img/1111.jpg" alt="幸福瞬间1">
                    <p class="moment-card-caption">海边的日落漫步 🌅</p>
                </div>
                <div class="moment-card gsap-reveal">
                    <img src="img/222.webp" alt="幸福瞬间2">
                    <p class="moment-card-caption">说走就走的旅行 ✈️</p>
                </div>
                <div class="moment-card gsap-reveal">
                    <img src="img/333.webp" alt="幸福瞬间3">
                    <p class="moment-card-caption">一起做饭的温馨 🍲</p>
                </div>
            </div>
            <a href="#" class="cta-button gsap-reveal">查看完整相册 🖼️➡️</a>
        </div>
    </section>
    
    <section id="future-wishes" class="future-wishes">
        <div class="container">
            <h2 class="gsap-reveal">未来期许 展望 ✨</h2>
            <p class="story-intro gsap-reveal">执子之手，与子偕老。我们的未来，充满无限可能与期待。🌟</p>
            <div class="wishes-list">
                <div class="wish-item gsap-reveal">
                    <h3>共同成长 🌱</h3>
                    <p>一起学习新技能，探索未知领域，成为更好的彼此。互相鼓励，共同进步，让每一天都充满意义。</p>
                </div>
                <div class="wish-item gsap-reveal">
                    <h3>环游世界 🌍</h3>
                    <p>手牵手去看遍世界的风景，从雪山到海岛，从古城到都市，在世界的每个角落留下我们的足迹和欢笑。</p>
                </div>
                <div class="wish-item gsap-reveal">
                    <h3>温馨小家 🏠💖</h3>
                    <p>打造一个充满爱与温暖的小家，养一只可爱的宠物，种满阳台的花草，享受每一个平凡又幸福的日常。</p>
                </div>
                 <div class="wish-item gsap-reveal">
                    <h3>健康快乐 😊💪</h3>
                    <p>保持健康的生活方式，拥有积极乐观的心态。愿我们岁岁常欢愉，年年皆胜意，笑口常开。</p>
                </div>
            </div>
        </div>
    </section>


    <footer class="site-footer">
        <div class="container">
            <p>用 ❤️ 构建 | [你的名字] & [伴侣的名字] &copy; 2025</p>
            <p>所有瞬间，只因有你 ✨</p>
            <p><a href="#">回到顶部 ↑</a></p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // GSAP 动画
            const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });

            // 1. Logo & Nav Links Animation
            tl.fromTo('.logo', { opacity: 0, y: -30 }, { opacity: 1, y: 0, duration: 0.8 })
              .fromTo('.nav-links li', 
                { opacity: 0, y: -20 }, 
                { opacity: 1, y: 0, duration: 0.5, stagger: 0.15 }, 
                "-=0.5" // Overlap with previous animation slightly
              );

            // 2. Hero Section Title - Letter by Letter Animation
            const heroTitle = document.getElementById('heroTitle');
            if (heroTitle) {
                const chars = heroTitle.innerText.split('');
                heroTitle.innerHTML = chars.map(char => `<span class="gsap-hero-title-char">${char === ' ' ? '&nbsp;' : char}</span>`).join('');
                
                tl.to('.gsap-hero-title-char', {
                    opacity: 1,
                    y: 0,
                    rotationX: 0,
                    scale: 1,
                    duration: 0.8,
                    stagger: 0.04, // Time between each letter's animation
                    ease: "back.out(1.7)"
                }, "-=0.2"); // Start this animation slightly before the previous one finishes
            }
            
            // 3. Hero Subtitle and Buttons
            tl.fromTo('.hero .subtitle', 
                { opacity: 0, y: 20 }, 
                { opacity: 1, y: 0, duration: 0.8 }, 
                "-=0.6" // Adjust timing relative to title
            )
            .fromTo('.hero-buttons .btn', 
                { opacity: 0, y: 20, scale: 0.8 }, 
                { opacity: 1, y: 0, scale: 1, duration: 0.6, stagger: 0.2 },
                "-=0.4"
            );

            // 4. Section elements reveal on scroll (or load if not implementing ScrollTrigger yet)
            // For simplicity, this will animate all at once after hero, can be enhanced with ScrollTrigger
            gsap.utils.toArray('.gsap-reveal').forEach((elem, i) => {
                gsap.fromTo(elem, 
                    { opacity: 0, y: 50 }, 
                    {
                        opacity: 1, 
                        y: 0, 
                        duration: 0.8, 
                        delay: i * 0.1 + tl.duration() - 0.5, // Stagger based on element index and hero animation duration
                        scrollTrigger: { // Basic ScrollTrigger example
                            trigger: elem,
                            start: "top 85%", // When the top of the element is 85% from the top of the viewport
                            toggleActions: "play none none none", // Play animation once when it enters viewport
                            // markers: true, // For debugging
                        }
                    }
                );
            });
            
            // Responsive Navbar Toggle
            const menuToggle = document.getElementById('menuToggle');
            const navLinks = document.getElementById('navLinks');

            if (menuToggle && navLinks) {
                menuToggle.addEventListener('click', () => {
                    navLinks.classList.toggle('active');
                    // Optional: Change hamburger icon to X
                    if (navLinks.classList.contains('active')) {
                        menuToggle.innerHTML = '✕'; 
                    } else {
                        menuToggle.innerHTML = '☰';
                    }
                });
            }

            // Smooth scroll for anchor links in navbar
            document.querySelectorAll('.nav-links a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                        // If mobile nav is open, close it after clicking a link
                        if (navLinks.classList.contains('active')) {
                           navLinks.classList.remove('active');
                           menuToggle.innerHTML = '☰';
                        }
                    }
                });
            });
             // Smooth scroll for hero buttons
            document.querySelectorAll('.hero-buttons a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });


        });
    </script>

</body>
</html>