HTML实战：制作Apple风格产品宣传页

于 2025-06-03 23:49:52 发布
阅读量405 收藏 6
点赞数 3
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81112251/article/details/148412471
版权

Apple风格产品宣传页设计详解

下面我将创建一个模仿Apple和小米风格的产品宣传页，重点展示耳机产品，突出分屏滚动、渐变背景和按钮交互三大特点。

设计思路

  1. 视觉风格：

    • 深色背景搭配霓虹渐变营造高端科技感

    • 简洁大气的排版与Apple设计语言一致

    • 精致的产品展示与细节特写

  2. 分屏滚动：

    • 使用CSS Scroll Snap实现分屏滚动效果

    • 右侧导航点指示当前位置

    • 每屏展示一个产品特性

  3. 交互元素：

    • 按钮悬停动画效果

    • 滚动触发淡入动画

    • 产品颜色选择交互

    • 价格卡片悬停效果

  4. 产品特性展示：

    • 沉浸式音质体验

    • 主动降噪技术

    • 超长续航能力

    • 精致人体工学设计

完整实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aura Pro - 未来之声</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: #fff;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .container {
            width: 100%;
            height: 100vh;
            scroll-snap-type: y mandatory;
            overflow-y: scroll;
            scrollbar-width: none;
        }

        .container::-webkit-scrollbar {
            display: none;
        }

        section {
            scroll-snap-align: start;
            height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .hero {
            background: radial-gradient(circle at center, #1a1a2e 0%, #0f0c29 70%);
        }

        .feature {
            background: linear-gradient(135deg, rgba(23, 23, 46, 0.9), rgba(48, 43, 99, 0.7));
        }

        .design {
            background: linear-gradient(135deg, rgba(36, 36, 62, 0.9), rgba(48, 43, 99, 0.7));
        }

        .specs {
            background: linear-gradient(135deg, rgba(36, 36, 62, 0.9), rgba(48, 43, 99, 0.7));
        }

        .purchase {
            background: linear-gradient(135deg, rgba(15, 12, 41, 0.9), rgba(36, 36, 62, 0.9));
        }

        h1 {
            font-size: 5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-align: center;
            background: linear-gradient(90deg, #ff7eee, #7ec8ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -2px;
        }

        h2 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-align: center;
        }

        .subtitle {
            font-size: 1.8rem;
            font-weight: 300;
            margin-bottom: 40px;
            text-align: center;
            max-width: 800px;
            color: rgba(255, 255, 255, 0.8);
        }

        .product-image {
            width: 800px;
            height: 400px;
            margin: 40px 0;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-image {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 0 30px rgba(126, 200, 255, 0.4));
            animation: float 6s infinite ease-in-out;
        }

        .feature-image {
            width: 600px;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            transition: transform 0.5s ease;
        }

        .feature-image:hover {
            transform: scale(1.03);
        }

        .feature-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 50px auto;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            background: rgba(255, 255, 255, 0.1);
        }

        .feature-card i {
            font-size: 3rem;
            color: #7ec8ff;
            margin-bottom: 20px;
        }

        .feature-card h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

        .feature-card p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .spec-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1000px;
            margin: 50px auto;
        }

        .spec-item {
            text-align: center;
            padding: 20px;
        }

        .spec-value {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff7eee, #7ec8ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .spec-label {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .pricing {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px;
            margin: 40px 0;
        }

        .price-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            width: 350px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .price-card:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .price-card h3 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .price {
            font-size: 3.5rem;
            font-weight: 700;
            margin: 30px 0;
            background: linear-gradient(90deg, #ff7eee, #7ec8ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .btn {
            display: inline-block;
            background: linear-gradient(90deg, #ff7eee, #7ec8ff);
            color: #0f0c29;
            border: none;
            padding: 16px 45px;
            font-size: 1.2rem;
            font-weight: 600;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 10px 25px rgba(126, 200, 255, 0.3);
        }

        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(126, 200, 255, 0.5);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #7ec8ff;
            color: #7ec8ff;
            box-shadow: none;
        }

        .btn-outline:hover {
            background: rgba(126, 200, 255, 0.1);
            box-shadow: 0 0 25px rgba(126, 200, 255, 0.3);
        }

        .nav-dots {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 100;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: #7ec8ff;
            transform: scale(1.4);
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(126, 200, 255, 0.5); }
            70% { box-shadow: 0 0 0 15px rgba(126, 200, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(126, 200, 255, 0); }
        }

        .color-options {
            display: flex;
            gap: 20px;
            margin: 30px 0;
        }

        .color-option {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s ease;
            border: 2px solid transparent;
        }

        .color-option:hover {
            transform: scale(1.2);
        }

        .color-option.active {
            border: 2px solid white;
            transform: scale(1.2);
        }

        footer {
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .design-details {
            display: flex;
            max-width: 1200px;
            gap: 50px;
            margin-top: 40px;
        }

        .design-text {
            flex: 1;
            padding: 20px;
        }

        .design-features {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-top: 30px;
        }

        .design-feature {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .design-feature i {
            font-size: 1.5rem;
            color: #7ec8ff;
        }

        .design-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media (max-width: 768px) {
            h1 { font-size: 3rem; }
            h2 { font-size: 2.5rem; }
            .subtitle { font-size: 1.2rem; }
            .product-image { width: 100%; }
            .features-grid { grid-template-columns: 1fr; }
            .spec-grid { grid-template-columns: 1fr; }
            .pricing { flex-direction: column; }
            .price-card { width: 100%; max-width: 350px; }
            .nav-dots { display: none; }
            .design-details { flex-direction: column; }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 导航点 -->
        <div class="nav-dots">
            <div class="dot active" data-section="0"></div>
            <div class="dot" data-section="1"></div>
            <div class="dot" data-section="2"></div>
            <div class="dot" data-section="3"></div>
            <div class="dot" data-section="4"></div>
        </div>

        <!-- Hero Section -->
        <section class="hero">
            <h1 class="fade-in">AURA PRO</h1>
            <p class="subtitle fade-in">超越声音的界限，沉浸式音频体验</p>
            <div class="product-image">
                <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=800&ixlib=rb-4.0.3&q=80" alt="Aura Pro耳机" class="hero-image">
            </div>
            <a href="#features" class="btn fade-in">探索产品 <i class="fas fa-arrow-down"></i></a>
        </section>

        <!-- Features Section -->
        <section class="feature" id="features">
            <h2 class="fade-in">革命性音频技术</h2>
            <p class="subtitle fade-in">专业级声学设计，重新定义无线音质</p>
            
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <i class="fas fa-volume-up"></i>
                    <h3>自适应降噪</h3>
                    <p>实时分析环境噪音，智能调整降噪强度，提供最佳听觉体验</p>
                </div>
                
                <div class="feature-card fade-in">
                    <i class="fas fa-microphone-alt"></i>
                    <h3>通透模式</h3>
                    <p>轻触即可听到周围声音，无需摘下耳机，保持环境感知</p>
                </div>
                
                <div class="feature-card fade-in">
                    <i class="fas fa-headphones"></i>
                    <h3>空间音频</h3>
                    <p>动态头部追踪技术，创造沉浸式环绕声体验</p>
                </div>
                
                <div class="feature-card fade-in">
                    <i class="fas fa-battery-full"></i>
                    <h3>超长续航</h3>
                    <p>长达40小时播放时间，充电10分钟即可使用5小时</p>
                </div>
            </div>
        </section>

        <!-- Design Section -->
        <section class="design">
            <h2 class="fade-in">匠心设计</h2>
            <p class="subtitle fade-in">为全天舒适佩戴而精心打造</p>
            
            <div class="design-details">
                <div class="design-text">
                    <div class="design-features">
                        <div class="design-feature fade-in">
                            <i class="fas fa-feather"></i>
                            <div>
                                <h3>轻盈舒适</h3>
                                <p>仅重198克，采用超柔软记忆棉耳罩</p>
                            </div>
                        </div>
                        
                        <div class="design-feature fade-in">
                            <i class="fas fa-hand-sparkles"></i>
                            <div>
                                <h3>高级材质</h3>
                                <p>航天级铝合金框架，耐磨亲肤材质</p>
                            </div>
                        </div>
                        
                        <div class="design-feature fade-in">
                            <i class="fas fa-compress-arrows-alt"></i>
                            <div>
                                <h3>可折叠设计</h3>
                                <p>轻松收纳，旅行携带毫无负担</p>
                            </div>
                        </div>
                        
                        <div class="design-feature fade-in">
                            <i class="fas fa-palette"></i>
                            <div>
                                <h3>多彩选择</h3>
                                <p>四种优雅配色，展现个人风格</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="design-image">
                    <div class="feature-image">
                        <img src="https://images.unsplash.com/photo-1572536147248-ac59a8abfa4b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&w=600&ixlib=rb-4.0.3&q=80" alt="耳机设计">
                    </div>
                </div>
            </div>
            
            <div class="color-options">
                <div class="color-option active" style="background-color: #1a1a2e;"></div>
                <div class="color-option" style="background-color: #e8e8e8;"></div>
                <div class="color-option" style="background-color: #c93a3a;"></div>
                <div class="color-option" style="background-color: #3ac9a7;"></div>
            </div>
        </section>

        <!-- Specs Section -->
        <section class="specs">
            <h2 class="fade-in">卓越性能</h2>
            <p class="subtitle fade-in">突破技术极限，提供无与伦比的音频体验</p>
            
            <div class="spec-grid">
                <div class="spec-item fade-in">
                    <div class="spec-value">40h</div>
                    <div class="spec-label">电池续航</div>
                </div>
                
                <div class="spec-item fade-in">
                    <div class="spec-value">4ms</div>
                    <div class="spec-label">超低延迟</div>
                </div>
                
                <div class="spec-item fade-in">
                    <div class="spec-value">IPX5</div>
                    <div class="spec-label">防水等级</div>
                </div>
                
                <div class="spec-item fade-in">
                    <div class="spec-value">45mm</div>
                    <div class="spec-label">驱动单元</div>
                </div>
                
                <div class="spec-item fade-in">
                    <div class="spec-value">-42dB</div>
                    <div class="spec-label">降噪深度</div>
                </div>
                
                <div class="spec-item fade-in">
                    <div class="spec-value">3设备</div>
                    <div class="spec-label">同时连接</div>
                </div>
            </div>
        </section>

        <!-- Purchase Section -->
        <section class="purchase">
            <h2 class="fade-in">即刻拥有</h2>
            <p class="subtitle fade-in">选择适合您的版本</p>
            
            <div class="pricing">
                <div class="price-card fade-in">
                    <h3>AURA PRO</h3>
                    <p>标准版，极致音质体验</p>
                    <div class="price">¥1699</div>
                    <p>主动降噪<br>空间音频<br>30小时续航</p>
                    <a href="#" class="btn">立即购买</a>
                </div>
                
                <div class="price-card fade-in">
                    <h3>AURA PRO MAX</h3>
                    <p>旗舰版，尊享所有功能</p>
                    <div class="price">¥2199</div>
                    <p>自适应降噪<br>头部追踪空间音频<br>40小时续航<br>无线充电盒</p>
                    <a href="#" class="btn pulse">立即购买</a>
                </div>
            </div>
            
            <footer>
                <p>&copy; 2023 Aura Audio. 保留所有权利。</p>
            </footer>
        </section>
    </div>

    <script>
        // 滚动监听
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('section');
            const dots = document.querySelectorAll('.dot');
            const fadeIns = document.querySelectorAll('.fade-in');
            
            // 导航点点击事件
            dots.forEach(dot => {
                dot.addEventListener('click', () => {
                    const index = dot.getAttribute('data-section');
                    sections[index].scrollIntoView({ behavior: 'smooth' });
                });
            });
            
            // 滚动事件
            window.addEventListener('scroll', () => {
                // 更新导航点
                const scrollPosition = window.scrollY;
                
                sections.forEach((section, index) => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;
                    
                    if (scrollPosition >= sectionTop - sectionHeight / 3 && 
                        scrollPosition < sectionTop + sectionHeight - sectionHeight / 3) {
                        dots.forEach(dot => dot.classList.remove('active'));
                        dots[index].classList.add('active');
                    }
                });
                
                // 淡入动画
                fadeIns.forEach(element => {
                    const elementTop = element.getBoundingClientRect().top;
                    const elementVisible = 150;
                    
                    if (elementTop < window.innerHeight - elementVisible) {
                        element.classList.add('appear');
                    }
                });
            });
            
            // 颜色选择
            const colorOptions = document.querySelectorAll('.color-option');
            colorOptions.forEach(option => {
                option.addEventListener('click', () => {
                    colorOptions.forEach(opt => opt.classList.remove('active'));
                    option.classList.add('active');
                });
            });
            
            // 初始触发一次滚动事件以激活初始可见的元素
            window.dispatchEvent(new Event('scroll'));
        });
    </script>
</body>
</html>

项目核心特点详解

1. 分屏滚动效果 (Sections)

  • 使用CSS的scroll-snap-type和scroll-snap-align实现分屏滚动

  • 右侧导航点指示当前屏幕位置

  • 每屏展示一个产品特性，内容高度聚焦

  • 滚动过渡平滑自然，增强用户体验

2. 渐变背景设计

  • 深色渐变背景营造高端科技感

  • 每屏使用不同渐变叠加增加层次感

  • 霓虹蓝紫渐变用于标题、按钮和重点数据

  • 磨砂玻璃效果卡片增强质感

3. 交互元素设计

  • 按钮交互：悬停时上浮、阴影增强、颜色变化

  • 卡片交互：悬停时上浮、阴影增强、背景变亮

  • 颜色选择：点击切换产品颜色，有选中状态指示

  • 导航点：点击可跳转到对应部分，滚动时自动更新

4. 动画效果

  • 滚动触发淡入动画（fade-in）

  • 产品主图浮动动画（float）

  • 推荐购买按钮脉冲动画（pulse）

  • 卡片悬停动画（scale和translate）

5. 产品特性展示

  • 首屏：产品主视觉展示，吸引用户注意力

  • 特性屏：网格布局展示核心功能（降噪、续航等）

  • 设计屏：详细展示产品设计细节与材质

  • 规格屏：清晰展示技术参数

  • 购买屏：价格对比与购买引导

6. 响应式设计

  • 在移动设备上自动调整布局

  • 网格布局变为单列

  • 字体大小适当减小

  • 隐藏导航点节省空间

技术实现亮点

  1. CSS Grid与Flexbox：用于创建灵活的网格布局

  2. CSS渐变与阴影：创建视觉深度和层次感

  3. CSS动画：实现平滑的过渡效果

  4. JavaScript交互：处理滚动事件、导航和用户交互

  5. 响应式设计：确保在各种设备上完美显示

这个页面完全模仿了Apple和小米的现代设计风格，通过简洁的布局、精美的动画和精心设计的交互元素，营造出高端科技产品的氛围。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三三十二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值