精美的美食食谱分享首页

就叫飞六吧2024-11-02 12:49

效果图：

完整代码，图片素材如下：

bash 复制代码 
<!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.2/gsap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #fdfbf7;
            font-family: 'ZCOOL XiaoWei', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        .header {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 15px 0;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            color: #e74c3c;
            font-family: 'Ma Shan Zheng', cursive;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .nav-menu {
            display: flex;
            gap: 35px;
        }

        .nav-item {
            text-decoration: none;
            color: #2c3e50;
            font-weight: 500;
            font-size: 17px;
            transition: all 0.3s;
            position: relative;
        }

        .nav-item:hover {
            color: #e74c3c;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background-color: #e74c3c;
            transition: all 0.3s;
            transform: translateX(-50%);
        }

        .nav-item:hover::after {
            width: 100%;
        }

        .main-content {
            max-width: 1200px;
            margin: 100px auto 40px;
            padding: 0 20px;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 70px;
            padding: 60px 0;
        }

        .hero-title {
            font-size: 56px;
            color: #2c3e50;
            margin-bottom: 25px;
            opacity: 0;
            transform: translateY(30px);
            font-family: 'Ma Shan Zheng', cursive;
            letter-spacing: 2px;
        }

        .hero-subtitle {
            font-size: 20px;
            color: #7f8c8d;
            margin-bottom: 45px;
            opacity: 0;
            transform: translateY(30px);
            line-height: 1.6;
        }

        .search-bar {
            width: 100%;
            max-width: 650px;
            margin: 0 auto 45px;
            position: relative;
            opacity: 0;
            transform: translateY(30px);
        }

        .search-input {
            width: 100%;
            padding: 18px 25px;
            border: none;
            border-radius: 50px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            transition: all 0.3s;
            background-color: rgba(255, 255, 255, 0.95);
        }

        .search-input:focus {
            outline: none;
            box-shadow: 0 5px 25px rgba(231, 76, 60, 0.2);
            transform: translateY(-2px);
        }

        .category-tags {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 50px;
            justify-content: center;
            opacity: 0;
            transform: translateY(30px);
        }

        .category-tag {
            padding: 10px 24px;
            background: white;
            border-radius: 25px;
            color: #34495e;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            font-size: 15px;
        }

        .category-tag:hover {
            background: #e74c3c;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        }

        .category-tag.active {
            background: #e74c3c;
            color: white;
        }

        .recipe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 35px;
            margin-top: 40px;
        }

        .recipe-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s;
            opacity: 0;
            transform: translateY(30px);
        }

        .recipe-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .recipe-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: all 0.5s;
        }

        .recipe-card:hover .recipe-image {
            transform: scale(1.05);
        }

        .recipe-content {
            padding: 25px;
        }

        .recipe-title {
            font-size: 22px;
            color: #2c3e50;
            margin-bottom: 12px;
            font-family: 'ZCOOL XiaoWei', sans-serif;
        }

        .recipe-desc {
            font-size: 15px;
            color: #7f8c8d;
            margin-bottom: 20px;
            line-height: 1.7;
        }

        .recipe-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #95a5a6;
            font-size: 14px;
            padding-top: 15px;
            border-top: 1px solid #ecf0f1;
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .hero-title {
                font-size: 36px;
            }

            .hero-subtitle {
                font-size: 18px;
            }

            .recipe-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
    </style>
</head>
<body>
<header class="header">
    <nav class="nav-container">
        <div class="logo">味享时光 🍽</div>
        <div class="nav-menu">
            <a href="#" class="nav-item">🏠 首页</a>
            <a href="#" class="nav-item">📚 菜谱大全</a>
            <a href="#" class="nav-item">🌟 每周精选</a>
            <a href="#" class="nav-item">👨‍🍳 名厨专栏</a>
            <a href="#" class="nav-item">📱 下载APP</a>
        </div>
    </nav>
</header>

<main class="main-content">
    <section class="hero-section">
        <h1 class="hero-title">寻味人生 · 品味生活 ✨</h1>
        <p class="hero-subtitle">探索千万道精选食谱，让烹饪变得简单有趣<br>遇见美食，遇见生活中最美好的时光</p>

        <div class="search-bar">
            <input type="text" class="search-input" placeholder="🔍 搜索食谱、食材、烹饪方式...">
        </div>

        <div class="category-tags">
            <span class="category-tag active">🔥 精选推荐</span>
            <span class="category-tag">🏠 家常菜</span>
            <span class="category-tag">🍰 烘焙</span>
            <span class="category-tag">🥬 素食</span>
            <span class="category-tag">🍲 汤品</span>
            <span class="category-tag">🍜 面食</span>
            <span class="category-tag">🥘 炖菜</span>
            <span class="category-tag">🍹 饮品</span>
            <span class="category-tag">🍱 便当</span>
        </div>
    </section>
    <div class="recipe-grid">
        <!-- 食谱卡片 -->
        <div class="recipe-card">
            <img src="1.jpg" alt="红烧牛肉" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🥩 浓情红烧牛肉</h3>
                <p class="recipe-desc">精选澳洲和牛慢炖八小时，18味香料调味，肉质酥烂，口感细腻。一口入魂，回味无穷。</p>
                <div class="recipe-meta">
                    <span>👨‍🍳 大师力荐</span>
                    <span>🕐 240分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="2.jpg" alt="樱花抹茶蛋糕" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🌸 樱花抹茶双层蛋糕</h3>
                <p class="recipe-desc">宇治抹茶邂逅樱花慕斯，层层交织出春日的浪漫。入口即化的绵密，让甜蜜在舌尖绽放。</p>
                <div class="recipe-meta">
                    <span>✨ 难度：高级</span>
                    <span>🕐 90分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="3.jpg" alt="秘制叉烧" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🔥 港式蜜汁叉烧</h3>
                <p class="recipe-desc">选用整块五花肉，秘制酱料腌制12小时，炭火慢烤，外皮金黄，肉质鲜嫩，蜜香四溢。</p>
                <div class="recipe-meta">
                    <span>💫 好评率：98%</span>
                    <span>🕐 180分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="4.jpg" alt="养生汤" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🍲 滋补养生靓汤</h3>
                <p class="recipe-desc">严选花胶、螺片、干贝等珍贵食材，文火慢炖6小时，汤色醇厚，滋补养颜。</p>
                <div class="recipe-meta">
                    <span>🌿 养生之选</span>
                    <span>🕐 360分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="1.jpg" alt="小笼包" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🥟 江南小笼包</h3>
                <p class="recipe-desc">传承百年技艺，考究的18褶工艺，鲜美汤汁内藏，一咬爆汁，唇齿留香。</p>
                <div class="recipe-meta">
                    <span>👑 非遗传承</span>
                    <span>🕐 45分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="2.jpg" alt="椰香咖喱虾" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🦐 椰香咖喱虾</h3>
                <p class="recipe-desc">南洋风情遇上泰式手法，新鲜椰浆与咖喱的绝妙融合，大虾鲜嫩弹牙，回味无穷。</p>
                <div class="recipe-meta">
                    <span>🌴 异国风味</span>
                    <span>🕐 35分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="3.jpg" alt="茶香龙井虾仁" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🍵 西湖龙井虾仁</h3>
                <p class="recipe-desc">明前龙井提香，大号虾仁翻炒，茶香清雅，虾肉鲜甜。江南美味，尽在这一口。</p>
                <div class="recipe-meta">
                    <span>🎋 江南风味</span>
                    <span>🕐 20分钟</span>
                </div>
            </div>
        </div>

        <div class="recipe-card">
            <img src="4.jpg" alt="牛奶布丁" class="recipe-image">
            <div class="recipe-content">
                <h3 class="recipe-title">🍮 法式焦糖布丁</h3>
                <p class="recipe-desc">法国进口淡奶油，搭配黄金焦糖，口感丝滑细腻，入口即化，带来星级甜品的享受。</p>
                <div class="recipe-meta">
                    <span>⭐ 米其林工艺</span>
                    <span>🕐 40分钟</span>
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="footer">
    <div class="footer-content">
        <div class="footer-section">
            <h3 class="footer-title">🍽️ 味享时光</h3>
            <p class="footer-desc">每一道美食都是生活的艺术，每一次烹饪都是对美好的期待。</p>
            <div class="footer-social">
                <a href="#" class="social-link">📱 微信</a>
                <a href="#" class="social-link">🔥 微博</a>
                <a href="#" class="social-link">📷 小红书</a>
                <a href="#" class="social-link">🎥 抖音</a>
            </div>
        </div>

        <div class="footer-section">
            <h4 class="footer-subtitle">快速链接</h4>
            <ul class="footer-links">
                <li><a href="#">🏆 今日推荐</a></li>
                <li><a href="#">📚 美食百科</a></li>
                <li><a href="#">🎯 厨艺课堂</a></li>
                <li><a href="#">🛒 食材商城</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <h4 class="footer-subtitle">美食专区</h4>
            <ul class="footer-links">
                <li><a href="#">🌟 名厨专栏</a></li>
                <li><a href="#">🍳 烹饪技巧</a></li>
                <li><a href="#">🎉 美食活动</a></li>
                <li><a href="#">📱 下载APP</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <h4 class="footer-subtitle">联系我们</h4>
            <ul class="footer-contact">
                <li>📞 客服热线：400-888-9999</li>
                <li>📧 商务合作：bd@weixiang.com</li>
                <li>📍 地址：北京市朝阳区美食广场88号</li>
                <li>⏰ 工作时间：周一至周日 9:00-21:00</li>
            </ul>
        </div>
    </div>

    <div class="footer-bottom">
        <div class="footer-bottom-content">
            <p class="copyright">© 2024 味享时光 All Rights Reserved. 京ICP备12345678号</p>
            <div class="footer-bottom-links">
                <a href="#">隐私政策</a>
                <a href="#">用户协议</a>
                <a href="#">关于我们</a>
            </div>
        </div>
    </div>
</footer>

<style>
    .footer {
        background-color: #2c3e50;
        color: #ecf0f1;
        padding: 60px 0 0;
        margin-top: 80px;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        padding: 0 20px;
    }

    .footer-section {
        padding-right: 20px;
    }

    .footer-title {
        font-size: 24px;
        font-family: 'Ma Shan Zheng', cursive;
        color: #e74c3c;
        margin-bottom: 20px;
    }

    .footer-desc {
        color: #bdc3c7;
        line-height: 1.6;
        margin-bottom: 25px;
        font-size: 15px;
    }

    .footer-subtitle {
        color: #ecf0f1;
        font-size: 18px;
        margin-bottom: 20px;
        font-family: 'ZCOOL XiaoWei', sans-serif;
    }

    .footer-social {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .social-link {
        color: #bdc3c7;
        text-decoration: none;
        transition: color 0.3s;
        font-size: 15px;
    }

    .social-link:hover {
        color: #e74c3c;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: #bdc3c7;
        text-decoration: none;
        transition: all 0.3s;
        font-size: 15px;
    }

    .footer-links a:hover {
        color: #e74c3c;
        padding-left: 5px;
    }

    .footer-contact {
        list-style: none;
        padding: 0;
    }

    .footer-contact li {
        color: #bdc3c7;
        margin-bottom: 12px;
        font-size: 15px;
    }

    .footer-bottom {
        margin-top: 50px;
        padding: 25px 0;
        border-top: 1px solid rgba(236, 240, 241, 0.1);
    }

    .footer-bottom-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .copyright {
        color: #95a5a6;
        font-size: 14px;
    }

    .footer-bottom-links {
        display: flex;
        gap: 20px;
    }

    .footer-bottom-links a {
        color: #95a5a6;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;
    }

    .footer-bottom-links a:hover {
        color: #e74c3c;
    }

    @media (max-width: 992px) {
        .footer-content {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .footer-content {
            grid-template-columns: 1fr;
        }

        .footer-bottom-content {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }
    }
</style>
<script>
    // 添加页脚动画
    document.addEventListener('DOMContentLoaded', () => {
        const footerSections = document.querySelectorAll('.footer-section');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    gsap.to(entry.target, {
                        opacity: 1,
                        y: 0,
                        duration: 0.8,
                        ease: 'power3.out'
                    });
                }
            });
        }, {threshold: 0.2});

        footerSections.forEach(section => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
            observer.observe(section);
        });
    });
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
        const timeline = gsap.timeline({
            defaults: {
                ease: 'power4.out',
                duration: 1.2
            }
        });

        timeline
            .to('.hero-title', {
                opacity: 1,
                y: 0,
            })
            .to('.hero-subtitle', {
                opacity: 1,
                y: 0,
            }, '-=0.8')
            .to('.search-bar', {
                opacity: 1,
                y: 0,
            }, '-=0.6')
            .to('.category-tags', {
                opacity: 1,
                y: 0,
            }, '-=0.4')
            .to('.recipe-card', {
                opacity: 1,
                y: 0,
                stagger: {
                    each: 0.15,
                    grid: 'auto',
                    from: 'start'
                }
            }, '-=0.2');
    });

    // 分类标签交互
    const categoryTags = document.querySelectorAll('.category-tag');
    categoryTags.forEach(tag => {
        tag.addEventListener('click', () => {
            // 移除所有active类
            categoryTags.forEach(t => t.classList.remove('active'));
            // 添加新的active类
            tag.classList.add('active');

            // 添加标签切换动画
            const cards = document.querySelectorAll('.recipe-card');
            gsap.fromTo(cards,
                {
                    opacity: 0,
                    y: 30,
                    scale: 0.95
                },
                {
                    opacity: 1,
                    y: 0,
                    scale: 1,
                    duration: 0.8,
                    stagger: {
                        each: 0.1,
                        grid: 'auto',
                        from: 'start'
                    },
                    ease: 'power3.out'
                }
            );
        });
    });

    // 高级搜索功能
    const searchInput = document.querySelector('.search-input');
    let debounceTimer;

    searchInput.addEventListener('input', (e) => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            const searchTerm = e.target.value.toLowerCase();
            const recipeCards = document.querySelectorAll('.recipe-card');

            recipeCards.forEach(card => {
                const title = card.querySelector('.recipe-title').textContent.toLowerCase();
                const desc = card.querySelector('.recipe-desc').textContent.toLowerCase();
                const meta = card.querySelector('.recipe-meta').textContent.toLowerCase();

                const matchFound = title.includes(searchTerm) ||
                    desc.includes(searchTerm) ||
                    meta.includes(searchTerm);

                gsap.to(card, {
                    opacity: matchFound ? 1 : 0,
                    y: matchFound ? 0 : 20,
                    scale: matchFound ? 1 : 0.95,
                    duration: 0.4,
                    ease: 'power2.out',
                    onComplete: () => {
                        card.style.display = matchFound ? 'block' : 'none';
                    }
                });
            });
        }, 300);
    });
</script>
</body>
</html>

视频素材图片如下：

1.jpg...4.jpg




相关推荐
前端Hardy17 小时前
HTML&CSS：有趣的漂流瓶
前端·javascript·css
前端Hardy17 小时前
HTML&CSS ：惊艳 UI 必备！卡片堆叠动画
前端·javascript·css
无羡仙18 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
toooooop818 小时前
本地开发环境webScoket调试，保存html即用
前端·css·websocket
小菜全18 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风19 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy19 小时前
只用2行CSS实现响应式布局，比媒体查询更优雅的布局方案
javascript·css·html
小菜全19 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
车口19 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码20 小时前
手把手教你实现一个EventEmitter，彻底告别复杂事件管理！
前端·javascript·node.js
热门推荐
01UV安装并设置国内源02A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程032025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！042025年数学建模国赛C题超详细解题思路05UV 工具安装与国内镜像源配置指南06不再让Windows更新！&Edge游戏助手卸载及关闭自动更新07KGG转MP3工具|非KGM文件|解密音频08突破百度网盘的下载限速，两种方法教会你【超详细】09Linux下V2Ray安装配置指南10教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员