美食广告 HTML5 模板
为你制作了一个响应式、视觉感强的美食广告 HTML5 模板，包含动态 hover 效果、适配手机 / 电脑，可直接替换图片和文案使用。
完整代码（开箱即用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美味【菜品名】- 舌尖上的治愈</title>
<!-- 引入外部样式库优化体验 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
/* 广告主视觉区 */
.food-banner {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
url("https://picsum.photos/id/292/1920/800") center/cover no-repeat;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 0 20px;
}
.food-banner h1 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px #000;
}
.food-banner p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 800px;
}
.btn-order {
background: #ff6b35;
color: white;
padding: 12px 30px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-order:hover {
background: #e85a26;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255,107,53,0.4);
}
/* 卖点展示区 */
.food-features {
padding: 80px 0;
background: #f9f9f9;
}
.feature-card {
text-align: center;
padding: 30px 20px;
border-radius: 10px;
transition: all 0.3s ease;
margin-bottom: 30px;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature-card i {
font-size: 3rem;
color: #ff6b35;
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.feature-card p {
color: #666;
line-height: 1.6;
}
/* 菜品展示区 */
.food-showcase {
padding: 80px 0;
}
.food-img {
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
height: 250px;
}
.food-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.food-img:hover img {
transform: scale(1.1);
}
.food-showcase h2 {
text-align: center;
margin-bottom: 60px;
font-size: 2.5rem;
color: #333;
}
/* 响应式适配 */
@media (max-width: 768px) {
.food-banner h1 {
font-size: 2.2rem;
}
.food-banner p {
font-size: 1rem;
}
.food-showcase h2 {
font-size: 2rem;
}
}
</style>
<!-- 引入图标库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<!-- 1. 广告主视觉区 -->
<section class="food-banner">
<h1>一口沦陷的【招牌菜品名】</h1>
<p>严选新鲜食材，慢火熬制出舌尖上的治愈味道，每一口都是满满的幸福感</p>
<button class="btn-order">立即抢购</button>
</section>
<!-- 2. 核心卖点展示 -->
<section class="food-features container">
<div class="row">
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-apple"></i>
<h3>新鲜食材</h3>
<p>每日严选当季新鲜食材，拒绝冷冻半成品，保证每一口的原汁原味</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-fire"></i>
<h3>现点现做</h3>
<p>拒绝预制菜，下单后即刻制作，热气腾腾送到你手中</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<i class="bi bi-heart"></i>
<h3>暖心暖胃</h3>
<p>匠心调配的味道，不仅满足味蕾，更温暖你的日常</p>
</div>
</div>
</div>
</section>
<!-- 3. 菜品展示区 -->
<section class="food-showcase container">
<h2>爆款推荐</h2>
<div class="row">
<div class="col-md-4">
<div class="food-img">
<img src="https://picsum.photos/id/1080/600/400" alt="菜品1">
</div>
<h4>【菜品名1】</h4>
<p>鲜香入味，一口就上头</p>
</div>
<div class="col-md-4">
<div class="food-img">
<img src="https://picsum.photos/id/1079/600/400" alt="菜品2">
</div>
<h4>【菜品名2】</h4>
<p>外酥里嫩，越吃越香</p>
</div>
<div class="col-md-4">
<div class="food-img">
<img src="https://picsum.photos/id/1084/600/400" alt="菜品3">
</div>
<h4>【菜品名3】</h4>
<p>清甜解腻，餐后必备</p>
</div>
</div>
</section>
<!-- 引入JS库（可选，如需交互增强） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
关键修改说明
- 替换核心内容：
- 把所有
【招牌菜品名】/【菜品名1/2/3】替换为你的实际菜品名称（如：麻辣小龙虾、芝士牛肉汉堡）； - 替换图片链接：将
https://picsum.photos/...换成你的菜品实拍图链接； - 调整文案：可直接复用之前给你的广告文案模板内容。
- 把所有
- 样式调整：
- 主视觉区背景色 / 按钮色：修改
.btn-order里的background值（如换成品牌色）； - 字体 / 字号：调整
font-size/font-family适配你的品牌风格； - 图标替换：可在 Bootstrap Icons 选择更贴合的图标（如用
bi bi-pepper-hot表示辣味）。
- 主视觉区背景色 / 按钮色：修改
- 使用前置条件：
- 无需本地部署，直接保存为
.html文件，用浏览器打开即可预览； - 如需上线，上传到服务器或托管平台（如 GitHub Pages、阿里云 OSS）即可。
- 无需本地部署，直接保存为
总结
- 模板包含主视觉区 + 卖点展示 + 菜品推荐三大核心模块，适配移动端和 PC 端；
- 核心修改点为替换菜品名、图片链接和调整品牌色系，其余代码可直接复用；
- 内置动态 hover 效果（按钮上浮、图片放大），提升广告视觉吸引力。
CodeCanyon 「Delicious Food Ads Template」模板解析
你提供的链接是 CodeCanyon 上售价 $10 的专业美食广告模板（ID:14496194），我为你拆解这款模板的核心信息、使用方式，以及适配它的本地化改造方案，帮你快速上手使用。
一、模板核心信息（官方原版）
1. 模板类型与适用场景
- 格式：HTML5 + CSS3 + JavaScript（含 jQuery），支持 Adobe Animate/Edge Animate 编辑
- 用途：适用于横幅广告（Banner）、社交媒体广告、网页弹窗广告，适配 300x250、728x90、160x600 等主流广告尺寸
- 特色：含动态动画（食材飘动、文字渐显、按钮交互）、多语言支持、可自定义配色 / 图片 / 文案，兼容所有现代浏览器
2. 原版模板包含的文件
delicious-food-ads-template/
├── animate-files/ # Adobe Animate 源文件（.fla/.xfl）
├── html5-output/ # 编译后的 HTML5 广告文件（可直接使用）
├── preview/ # 预览图/预览视频
├── documentation.pdf # 官方使用文档
└── readme.txt # 快速上手说明
3. 原版使用限制
- 需要购买授权（$10）才能商用，未购买仅可用于学习；
- 原版为英文界面，需手动修改文案为中文；
- 动画源文件编辑需要 Adobe Animate/Edge Animate 软件基础。
二、本地化改造方案（适配中文场景）
如果你购买了该模板，可按以下步骤改造为中文美食广告，我也提供简化版替代代码（无需付费 / 无需专业软件）：
方案 1：改造原版模板（适合有购买授权的情况）
步骤 1：修改文案（核心）
打开 html5-output 文件夹下对应尺寸的 index.html，替换所有英文文案为中文：
<!-- 原版英文 -->
<h2>Delicious Burger</h2>
<p>Only $5.99 | Fresh & Tasty</p>
<a href="#" class="btn">Order Now</a>
<!-- 改造后中文 -->
<h2>招牌牛肉汉堡</h2>
<p>仅售39元 | 现烤现做 鲜嫩多汁</p>
<a href="#" class="btn">立即下单</a>
步骤 2：替换图片 / 配色
- 图片：将
html5-output/images/下的食材图片替换为你的菜品实拍图（保持尺寸一致）； - 配色：修改
css/style.css中的主色值（原版橙色#ff7700可改为品牌色，如火锅红#e63946）：
/* 原版 */
:root { --primary-color: #ff7700; }
/* 改造后 */
:root { --primary-color: #e63946; } /* 火锅红 */
步骤 3：调整动画（可选）
如需修改动画节奏，用 Adobe Animate 打开 animate-files 下的 .fla 文件，调整「时间轴」上的动画帧即可。
方案 2：免费替代版（无需购买，开箱即用）
如果你不想付费购买，我基于该模板的设计风格，制作了免费中文版，保留动态效果和适配尺寸，可直接使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食广告 - 300x250</title>
<style>
/* 适配300x250标准广告尺寸 */
.food-ad {
width: 300px;
height: 250px;
border: 1px solid #eee;
overflow: hidden;
position: relative;
background: #fff;
font-family: "Microsoft Yahei", sans-serif;
}
/* 背景图+渐变遮罩 */
.ad-bg {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)),
url("https://picsum.photos/id/292/300/250") center/cover no-repeat;
position: absolute;
top: 0;
left: 0;
animation: bg-zoom 8s infinite ease-in-out;
}
/* 动态缩放动画（复刻原版效果） */
@keyframes bg-zoom {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 文案区域 */
.ad-text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
z-index: 2;
}
.ad-text h3 {
font-size: 18px;
margin: 0 0 5px 0;
animation: fade-in 2s ease-out;
}
.ad-text p {
font-size: 14px;
margin: 0 0 10px 0;
animation: fade-in 3s ease-out;
}
/* 按钮（复刻原版交互） */
.ad-btn {
display: inline-block;
padding: 6px 15px;
background: #ff7700;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
animation: fade-in 4s ease-out;
transition: all 0.3s ease;
}
.ad-btn:hover {
background: #e66a00;
transform: translateY(-2px);
}
@keyframes fade-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="food-ad">
<div class="ad-bg"></div>
<div class="ad-text">
<h3>一口沦陷的招牌小龙虾</h3>
<p>麻辣鲜香 | 限时特惠 88元/斤</p>
<a href="#" class="ad-btn">立即抢购</a>
</div>
</div>
</body>
</html>
替代版使用说明：
- 保存为
.html文件，直接用浏览器打开即可预览； - 修改尺寸：将
.food-ad的width/height改为 728x90/160x600 等其他广告尺寸； - 替换内容：修改图片链接、文案、配色即可适配你的菜品。
总结
- CodeCanyon 原版模板是专业付费版，含多尺寸 / 动画源文件，适合商用（需购买授权），改造核心是替换文案 / 图片 / 配色；
- 免费替代版复刻了原版的动态效果（背景缩放、文字渐显、按钮交互），无需付费 / 专业软件，300x250 尺寸可直接使用；
- 无论使用哪种版本，重点是适配中文文案和本地菜品特色（如麻辣、鲜香等关键词），并保持视觉风格统一。
