返回
<!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; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } body { background-color: #f8f9fa; color: #333; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 40px 0; background: linear-gradient(135deg, #ff6b6b, #ff8e53); color: white; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { font-size: 2.5rem; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); } .subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 800px; margin: 0 auto; } .section { background: white; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } h2 { color: #ff6b6b; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; } .timeline-container { position: relative; padding: 40px 0; } .timeline { display: flex; justify-content: space-between; position: relative; } .timeline::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: linear-gradient(to right, #ff6b6b, #ff8e53); transform: translateY(-50%); } .timeline-item { text-align: center; position: relative; width: 10%; z-index: 2; } .timeline-dot { width: 20px; height: 20px; background: #ff6b6b; border-radius: 50%; margin: 0 auto 10px; position: relative; z-index: 3; cursor: pointer; transition: all 0.3s ease; } .timeline-dot:hover { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.3); } .timeline-year { font-weight: bold; margin-bottom: 5px; } .timeline-food { font-size: 0.85rem; color: #666; } .details-panel { display: none; background: white; border-radius: 12px; padding: 25px; margin-top: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-left: 5px solid #ff6b6b; } .details-panel.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .food-image { width: 100%; height: 200px; background-color: #f0f0f0; border-radius: 8px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 1.2rem; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 25px 0; } .stat-item { background: #f8f9fa; padding: 15px; border-radius: 8px; text-align: center; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #ff6b6b; margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: #666; } .charts-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0; } .chart { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .chart-title { font-size: 1.1rem; margin-bottom: 15px; color: #555; text-align: center; } .interactive-section { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 30px; border-radius: 12px; text-align: center; margin-top: 40px; } .vote-btn { background: #ff6b6b; color: white; border: none; padding: 12px 30px; border-radius: 50px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); } .vote-btn:hover { background: #ff5252; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); } footer { text-align: center; padding: 30px 0; color: #666; font-size: 0.9rem; margin-top: 50px; border-top: 1px solid #eee; } @media (max-width: 768px) { .charts-container, .stats-grid { grid-template-columns: 1fr; } .timeline-item { width: 12%; } h1 { font-size: 2rem; } } </style> </head> <body> <div class="container"> <header> <h1>舌尖上的流量：网红美食十年进化史</h1> <p class="subtitle">从2015到2025，探索网红美食从视觉爆款到社交共创的演变历程</p> </header> <section class="section"> <h2>十年进化时间轴</h2> <div class="timeline-container"> <div class="timeline"> <div class="timeline-item" data-year="2015"> <div class="timeline-dot"></div> <div class="timeline-year">2015</div> <div class="timeline-food">芝士榴莲饼</div> </div> <div class="timeline-item" data-year="2016"> <div class="timeline-dot"></div> <div class="timeline-year">2016</div> <div class="timeline-food">乌云冰淇淋</div> </div> <div class="timeline-item" data-year="2017"> <div class="timeline-dot"></div> <div class="timeline-year">2017</div> <div class="timeline-food">抹茶脏脏包</div> </div> <div class="timeline-item" data-year="2018"> <div class="timeline-dot"></div> <div class="timeline-year">2018</div> <div class="timeline-food">毛巾卷蛋糕</div> </div> <div class="timeline-item" data-year="2019"> <div class="timeline-dot"></div> <div class="timeline-year">2019</div> <div class="timeline-food">螺蛳粉火锅</div> </div> <div class="timeline-item" data-year="2020"> <div class="timeline-dot"></div> <div class="timeline-year">2020</div> <div class="timeline-food">爆浆流心蛋糕</div> </div> <div class="timeline-item" data-year="2021"> <div class="timeline-dot"></div> <div class="timeline-year">2021</div> <div class="timeline-food">脆哨拿铁</div> </div> <div class="timeline-item" data-year="2022"> <div class="timeline-dot"></div> <div class="timeline-year">2022</div> <div class="timeline-food">热奶宝</div> </div> <div class="timeline-item" data-year="2023"> <div class="timeline-dot"></div> <div class="timeline-year">2023</div> <div class="timeline-food">芋泥麻薯蛋挞</div> </div> <div class="timeline-item" data-year="2024"> <div class="timeline-dot"></div> <div class="timeline-year">2024-2025</div> <div class="timeline-food">固体杨枝甘露</div> </div> </div> <!-- 详情面板 --> <div id="details-panel" class="details-panel"> <h3 id="detail-title">芝士榴莲饼 (2015)</h3> <div class="food-image">美食图片展示区域</div> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">65%</div> <div class="stat-label">视觉依赖度</div> </div> <div class="stat-item"> <div class="stat-value">5.8万</div> <div class="stat-label">UGC峰值(条)</div> </div> <div class="stat-item"> <div class="stat-value">2周</div> <div class="stat-label">爆火周期</div> </div> <div class="stat-item"> <div class="stat-value">微博</div> <div class="stat-label">核心传播平台</div> </div> </div> <p id="detail-description">2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。</p> </div> </div> </section> <section class="section"> <h2>网红美食爆火逻辑分析</h2> <div class="charts-container"> <div class="chart"> <div class="chart-title">感官刺激维度变化</div> <svg width="100%" height="80%"> <!-- 这里将放置感官刺激的SVG图表 --> <text x="50%" y="50%" text-anchor="middle" fill="#999">感官刺激数据可视化图表</text> </svg> </div> <div class="chart"> <div class="chart-title">UGC传播与爆火周期关联</div> <svg width="100%" height="80%"> <!-- 这里将放置UGC传播的SVG图表 --> <text x="50%" y="50%" text-anchor="middle" fill="#999">UGC传播数据可视化图表</text> </svg> </div> <div class="chart"> <div class="chart-title">成本-销量-利润率关系</div> <svg width="100%" height="80%"> <!-- 这里将放置成本利润的SVG图表 --> <text x="50%" y="50%" text-anchor="middle" fill="#999">成本利润数据可视化图表</text> </svg> </div> <div class="chart"> <div class="chart-title">文化类网红美食区域分布</div> <svg width="100%" height="80%"> <!-- 这里将放置区域分布的SVG图表 --> <text x="50%" y="50%" text-anchor="middle" fill="#999">区域分布数据可视化图表</text> </svg> </div> </div> </section> <section class="interactive-section"> <h2>你的选择决定下一个爆款</h2> <p>参与我们的互动投票，选出你心仪的食材组合，你的选择将直接成为下一款网红美食的研发蓝本！</p> <button class="vote-btn">立即参与投票</button> </section> <footer> <p>© 2026 舌尖上的流量研究小组 | 孔佳莉 刘妍 潘洋彤</p> <p>数据来源：公开资料整理，仅供参考</p> </footer> </div> <script> // 时间轴交互功能 document.querySelectorAll('.timeline-dot').forEach(dot => { dot.addEventListener('click', function() { const year = this.parentElement.getAttribute('data-year'); showYearDetails(year); }); }); // 默认显示2015年的详情 showYearDetails('2015'); function showYearDetails(year) { const panel = document.getElementById('details-panel'); const title = document.getElementById('detail-title'); const description = document.getElementById('detail-description'); // 根据年份更新内容 const details = getYearDetails(year); title.textContent = details.title; description.textContent = details.description; // 更新统计数据 document.querySelectorAll('.stat-value').forEach((stat, index) => { stat.textContent = details.stats[index]; }); // 显示面板 panel.classList.add('active'); } function getYearDetails(year) { const details = { '2015': { title: '芝士榴莲饼 (2015)', description: '2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。', stats: ['65%', '5.8万', '2周', '微博'] }, '2016': { title: '乌云冰淇淋 (2016)', description: '2016年，乌云冰淇淋以"颜值噱头+甜系主导"为特色，通过美食博客传播，开启了打卡经济模式。', stats: ['58%', '3.2万', '10天', '美食博客'] }, '2017': { title: '抹茶脏脏包 (2017)', description: '2017年，抹茶脏脏包凭借"吃后反差+网红元素"的特点，在社交平台实现刷屏式传播，成为年度爆款。', stats: ['62%', '8.7万', '3周', '社交平台'] }, '2018': { title: '毛巾卷蛋糕 (2018)', description: '2018年，毛巾卷蛋糕以"视觉治愈+大众口味"为卖点，通过线下门店与线上种草联动的方式走红。', stats: ['70%', '12.5万', '4周', '线上线下联动'] }, '2019': { title: '螺蛳粉火锅 (2019)', description: '2019年，螺蛳粉火锅凭借"跨品类融合+重味刺激"的特点，在抖音平台爆火，催生了居家复刻趋势。', stats: ['55%', '15.3万', '5周', '抖音'] }, '2020': { title: '爆浆流心蛋糕 (2020)', description: '2020年，爆浆流心蛋糕以"流心视觉+口感升级"为特色，在小红书平台获得超过12万条笔记，成为传播核心阵地。', stats: ['68%', '12万+', '6周', '小红书'] }, '2021': { title: '脆哨拿铁 (2021)', description: '2021年，脆哨拿铁凭借"甜咸碰撞+听觉吸睛"的特点出圈，探店vlog成为主要传播方式，带火了咖啡创新品类。', stats: ['52%', '9.8万', '3周', '探店vlog'] }, '2022': { title: '热奶宝 (2022)', description: '2022年，热奶宝以"街头升级+分层颜值"为特色，成为年度顶流，依赖直播带货拉动销量峰值。', stats: ['72%', '18.5万', '8周', '直播带货'] }, '2023': { title: '芋泥麻薯蛋挞 (2023)', description: '2023年，芋泥麻薯蛋挞凭借"主食+甜品重构"的创新组合走红，依赖社交共创扩大传播声量。', stats: ['60%', '14.2万', '5周', '社交共创'] }, '2024': { title: '固体杨枝甘露 (2024-2025)', description: '2024-2025年，固体杨枝甘露以"形态改造+本土食材"为特色，依赖社交平台共创与社群分享，"社交共创"属性显著。', stats: ['45%+40%', '22.3万', '7周', '社交平台共创'] } }; return details[year] || details['2015']; } // 投票按钮交互 document.querySelector('.vote-btn').addEventListener('click', function() { alert('投票功能即将开放！请关注我们的公众号获取最新投票链接。'); }); </script> </body> </html>
social mediaviralfood trends
![<!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;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
color: white;
border-radius: 12px;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 15px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.section {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
h2 {
color: #ff6b6b;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
.timeline-container {
position: relative;
padding: 40px 0;
}
.timeline {
display: flex;
justify-content: space-between;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, #ff6b6b, #ff8e53);
transform: translateY(-50%);
}
.timeline-item {
text-align: center;
position: relative;
width: 10%;
z-index: 2;
}
.timeline-dot {
width: 20px;
height: 20px;
background: #ff6b6b;
border-radius: 50%;
margin: 0 auto 10px;
position: relative;
z-index: 3;
cursor: pointer;
transition: all 0.3s ease;
}
.timeline-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.3);
}
.timeline-year {
font-weight: bold;
margin-bottom: 5px;
}
.timeline-food {
font-size: 0.85rem;
color: #666;
}
.details-panel {
display: none;
background: white;
border-radius: 12px;
padding: 25px;
margin-top: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-left: 5px solid #ff6b6b;
}
.details-panel.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.food-image {
width: 100%;
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 1.2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 25px 0;
}
.stat-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
text-align: center;
}
.stat-value {
font-size: 1.8rem;
font-weight: bold;
color: #ff6b6b;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
}
.charts-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.chart {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.chart-title {
font-size: 1.1rem;
margin-bottom: 15px;
color: #555;
text-align: center;
}
.interactive-section {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 30px;
border-radius: 12px;
text-align: center;
margin-top: 40px;
}
.vote-btn {
background: #ff6b6b;
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.vote-btn:hover {
background: #ff5252;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
footer {
text-align: center;
padding: 30px 0;
color: #666;
font-size: 0.9rem;
margin-top: 50px;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.charts-container, .stats-grid {
grid-template-columns: 1fr;
}
.timeline-item {
width: 12%;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>舌尖上的流量：网红美食十年进化史</h1>
<p class="subtitle">从2015到2025，探索网红美食从视觉爆款到社交共创的演变历程</p>
</header>
<section class="section">
<h2>十年进化时间轴</h2>
<div class="timeline-container">
<div class="timeline">
<div class="timeline-item" data-year="2015">
<div class="timeline-dot"></div>
<div class="timeline-year">2015</div>
<div class="timeline-food">芝士榴莲饼</div>
</div>
<div class="timeline-item" data-year="2016">
<div class="timeline-dot"></div>
<div class="timeline-year">2016</div>
<div class="timeline-food">乌云冰淇淋</div>
</div>
<div class="timeline-item" data-year="2017">
<div class="timeline-dot"></div>
<div class="timeline-year">2017</div>
<div class="timeline-food">抹茶脏脏包</div>
</div>
<div class="timeline-item" data-year="2018">
<div class="timeline-dot"></div>
<div class="timeline-year">2018</div>
<div class="timeline-food">毛巾卷蛋糕</div>
</div>
<div class="timeline-item" data-year="2019">
<div class="timeline-dot"></div>
<div class="timeline-year">2019</div>
<div class="timeline-food">螺蛳粉火锅</div>
</div>
<div class="timeline-item" data-year="2020">
<div class="timeline-dot"></div>
<div class="timeline-year">2020</div>
<div class="timeline-food">爆浆流心蛋糕</div>
</div>
<div class="timeline-item" data-year="2021">
<div class="timeline-dot"></div>
<div class="timeline-year">2021</div>
<div class="timeline-food">脆哨拿铁</div>
</div>
<div class="timeline-item" data-year="2022">
<div class="timeline-dot"></div>
<div class="timeline-year">2022</div>
<div class="timeline-food">热奶宝</div>
</div>
<div class="timeline-item" data-year="2023">
<div class="timeline-dot"></div>
<div class="timeline-year">2023</div>
<div class="timeline-food">芋泥麻薯蛋挞</div>
</div>
<div class="timeline-item" data-year="2024">
<div class="timeline-dot"></div>
<div class="timeline-year">2024-2025</div>
<div class="timeline-food">固体杨枝甘露</div>
</div>
</div>
<!-- 详情面板 -->
<div id="details-panel" class="details-panel">
<h3 id="detail-title">芝士榴莲饼 (2015)</h3>
<div class="food-image">美食图片展示区域</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">65%</div>
<div class="stat-label">视觉依赖度</div>
</div>
<div class="stat-item">
<div class="stat-value">5.8万</div>
<div class="stat-label">UGC峰值(条)</div>
</div>
<div class="stat-item">
<div class="stat-value">2周</div>
<div class="stat-label">爆火周期</div>
</div>
<div class="stat-item">
<div class="stat-value">微博</div>
<div class="stat-label">核心传播平台</div>
</div>
</div>
<p id="detail-description">2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。</p>
</div>
</div>
</section>
<section class="section">
<h2>网红美食爆火逻辑分析</h2>
<div class="charts-container">
<div class="chart">
<div class="chart-title">感官刺激维度变化</div>
<svg width="100%" height="80%">
<!-- 这里将放置感官刺激的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">感官刺激数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">UGC传播与爆火周期关联</div>
<svg width="100%" height="80%">
<!-- 这里将放置UGC传播的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">UGC传播数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">成本-销量-利润率关系</div>
<svg width="100%" height="80%">
<!-- 这里将放置成本利润的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">成本利润数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">文化类网红美食区域分布</div>
<svg width="100%" height="80%">
<!-- 这里将放置区域分布的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">区域分布数据可视化图表</text>
</svg>
</div>
</div>
</section>
<section class="interactive-section">
<h2>你的选择决定下一个爆款</h2>
<p>参与我们的互动投票，选出你心仪的食材组合，你的选择将直接成为下一款网红美食的研发蓝本！</p>
<button class="vote-btn">立即参与投票</button>
</section>
<footer>
<p>© 2026 舌尖上的流量研究小组 | 孔佳莉 刘妍 潘洋彤</p>
<p>数据来源：公开资料整理，仅供参考</p>
</footer>
</div>
<script>
// 时间轴交互功能
document.querySelectorAll('.timeline-dot').forEach(dot => {
dot.addEventListener('click', function() {
const year = this.parentElement.getAttribute('data-year');
showYearDetails(year);
});
});
// 默认显示2015年的详情
showYearDetails('2015');
function showYearDetails(year) {
const panel = document.getElementById('details-panel');
const title = document.getElementById('detail-title');
const description = document.getElementById('detail-description');
// 根据年份更新内容
const details = getYearDetails(year);
title.textContent = details.title;
description.textContent = details.description;
// 更新统计数据
document.querySelectorAll('.stat-value').forEach((stat, index) => {
stat.textContent = details.stats[index];
});
// 显示面板
panel.classList.add('active');
}
function getYearDetails(year) {
const details = {
'2015': {
title: '芝士榴莲饼 (2015)',
description: '2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。',
stats: ['65%', '5.8万', '2周', '微博']
},
'2016': {
title: '乌云冰淇淋 (2016)',
description: '2016年，乌云冰淇淋以"颜值噱头+甜系主导"为特色，通过美食博客传播，开启了打卡经济模式。',
stats: ['58%', '3.2万', '10天', '美食博客']
},
'2017': {
title: '抹茶脏脏包 (2017)',
description: '2017年，抹茶脏脏包凭借"吃后反差+网红元素"的特点，在社交平台实现刷屏式传播，成为年度爆款。',
stats: ['62%', '8.7万', '3周', '社交平台']
},
'2018': {
title: '毛巾卷蛋糕 (2018)',
description: '2018年，毛巾卷蛋糕以"视觉治愈+大众口味"为卖点，通过线下门店与线上种草联动的方式走红。',
stats: ['70%', '12.5万', '4周', '线上线下联动']
},
'2019': {
title: '螺蛳粉火锅 (2019)',
description: '2019年，螺蛳粉火锅凭借"跨品类融合+重味刺激"的特点，在抖音平台爆火，催生了居家复刻趋势。',
stats: ['55%', '15.3万', '5周', '抖音']
},
'2020': {
title: '爆浆流心蛋糕 (2020)',
description: '2020年，爆浆流心蛋糕以"流心视觉+口感升级"为特色，在小红书平台获得超过12万条笔记，成为传播核心阵地。',
stats: ['68%', '12万+', '6周', '小红书']
},
'2021': {
title: '脆哨拿铁 (2021)',
description: '2021年，脆哨拿铁凭借"甜咸碰撞+听觉吸睛"的特点出圈，探店vlog成为主要传播方式，带火了咖啡创新品类。',
stats: ['52%', '9.8万', '3周', '探店vlog']
},
'2022': {
title: '热奶宝 (2022)',
description: '2022年，热奶宝以"街头升级+分层颜值"为特色，成为年度顶流，依赖直播带货拉动销量峰值。',
stats: ['72%', '18.5万', '8周', '直播带货']
},
'2023': {
title: '芋泥麻薯蛋挞 (2023)',
description: '2023年，芋泥麻薯蛋挞凭借"主食+甜品重构"的创新组合走红，依赖社交共创扩大传播声量。',
stats: ['60%', '14.2万', '5周', '社交共创']
},
'2024': {
title: '固体杨枝甘露 (2024-2025)',
description: '2024-2025年，固体杨枝甘露以"形态改造+本土食材"为特色，依赖社交平台共创与社群分享，"社交共创"属性显著。',
stats: ['45%+40%', '22.3万', '7周', '社交平台共创']
}
};
return details[year] || details['2015'];
}
// 投票按钮交互
document.querySelector('.vote-btn').addEventListener('click', function() {
alert('投票功能即将开放！请关注我们的公众号获取最新投票链接。');
});
</script>
</body>
</html>](https://static.svgx.io/svgs/2026-01-15/5d72804b-26b1-48ab-9861-94450dc5955c.svg)
![<!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;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
color: white;
border-radius: 12px;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 15px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.section {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
h2 {
color: #ff6b6b;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
.timeline-container {
position: relative;
padding: 40px 0;
}
.timeline {
display: flex;
justify-content: space-between;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, #ff6b6b, #ff8e53);
transform: translateY(-50%);
}
.timeline-item {
text-align: center;
position: relative;
width: 10%;
z-index: 2;
}
.timeline-dot {
width: 20px;
height: 20px;
background: #ff6b6b;
border-radius: 50%;
margin: 0 auto 10px;
position: relative;
z-index: 3;
cursor: pointer;
transition: all 0.3s ease;
}
.timeline-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.3);
}
.timeline-year {
font-weight: bold;
margin-bottom: 5px;
}
.timeline-food {
font-size: 0.85rem;
color: #666;
}
.details-panel {
display: none;
background: white;
border-radius: 12px;
padding: 25px;
margin-top: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-left: 5px solid #ff6b6b;
}
.details-panel.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.food-image {
width: 100%;
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 1.2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 25px 0;
}
.stat-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
text-align: center;
}
.stat-value {
font-size: 1.8rem;
font-weight: bold;
color: #ff6b6b;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: #666;
}
.charts-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.chart {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.chart-title {
font-size: 1.1rem;
margin-bottom: 15px;
color: #555;
text-align: center;
}
.interactive-section {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 30px;
border-radius: 12px;
text-align: center;
margin-top: 40px;
}
.vote-btn {
background: #ff6b6b;
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.vote-btn:hover {
background: #ff5252;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
footer {
text-align: center;
padding: 30px 0;
color: #666;
font-size: 0.9rem;
margin-top: 50px;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.charts-container, .stats-grid {
grid-template-columns: 1fr;
}
.timeline-item {
width: 12%;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>舌尖上的流量：网红美食十年进化史</h1>
<p class="subtitle">从2015到2025，探索网红美食从视觉爆款到社交共创的演变历程</p>
</header>
<section class="section">
<h2>十年进化时间轴</h2>
<div class="timeline-container">
<div class="timeline">
<div class="timeline-item" data-year="2015">
<div class="timeline-dot"></div>
<div class="timeline-year">2015</div>
<div class="timeline-food">芝士榴莲饼</div>
</div>
<div class="timeline-item" data-year="2016">
<div class="timeline-dot"></div>
<div class="timeline-year">2016</div>
<div class="timeline-food">乌云冰淇淋</div>
</div>
<div class="timeline-item" data-year="2017">
<div class="timeline-dot"></div>
<div class="timeline-year">2017</div>
<div class="timeline-food">抹茶脏脏包</div>
</div>
<div class="timeline-item" data-year="2018">
<div class="timeline-dot"></div>
<div class="timeline-year">2018</div>
<div class="timeline-food">毛巾卷蛋糕</div>
</div>
<div class="timeline-item" data-year="2019">
<div class="timeline-dot"></div>
<div class="timeline-year">2019</div>
<div class="timeline-food">螺蛳粉火锅</div>
</div>
<div class="timeline-item" data-year="2020">
<div class="timeline-dot"></div>
<div class="timeline-year">2020</div>
<div class="timeline-food">爆浆流心蛋糕</div>
</div>
<div class="timeline-item" data-year="2021">
<div class="timeline-dot"></div>
<div class="timeline-year">2021</div>
<div class="timeline-food">脆哨拿铁</div>
</div>
<div class="timeline-item" data-year="2022">
<div class="timeline-dot"></div>
<div class="timeline-year">2022</div>
<div class="timeline-food">热奶宝</div>
</div>
<div class="timeline-item" data-year="2023">
<div class="timeline-dot"></div>
<div class="timeline-year">2023</div>
<div class="timeline-food">芋泥麻薯蛋挞</div>
</div>
<div class="timeline-item" data-year="2024">
<div class="timeline-dot"></div>
<div class="timeline-year">2024-2025</div>
<div class="timeline-food">固体杨枝甘露</div>
</div>
</div>
<!-- 详情面板 -->
<div id="details-panel" class="details-panel">
<h3 id="detail-title">芝士榴莲饼 (2015)</h3>
<div class="food-image">美食图片展示区域</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">65%</div>
<div class="stat-label">视觉依赖度</div>
</div>
<div class="stat-item">
<div class="stat-value">5.8万</div>
<div class="stat-label">UGC峰值(条)</div>
</div>
<div class="stat-item">
<div class="stat-value">2周</div>
<div class="stat-label">爆火周期</div>
</div>
<div class="stat-item">
<div class="stat-value">微博</div>
<div class="stat-label">核心传播平台</div>
</div>
</div>
<p id="detail-description">2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。</p>
</div>
</div>
</section>
<section class="section">
<h2>网红美食爆火逻辑分析</h2>
<div class="charts-container">
<div class="chart">
<div class="chart-title">感官刺激维度变化</div>
<svg width="100%" height="80%">
<!-- 这里将放置感官刺激的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">感官刺激数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">UGC传播与爆火周期关联</div>
<svg width="100%" height="80%">
<!-- 这里将放置UGC传播的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">UGC传播数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">成本-销量-利润率关系</div>
<svg width="100%" height="80%">
<!-- 这里将放置成本利润的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">成本利润数据可视化图表</text>
</svg>
</div>
<div class="chart">
<div class="chart-title">文化类网红美食区域分布</div>
<svg width="100%" height="80%">
<!-- 这里将放置区域分布的SVG图表 -->
<text x="50%" y="50%" text-anchor="middle" fill="#999">区域分布数据可视化图表</text>
</svg>
</div>
</div>
</section>
<section class="interactive-section">
<h2>你的选择决定下一个爆款</h2>
<p>参与我们的互动投票，选出你心仪的食材组合，你的选择将直接成为下一款网红美食的研发蓝本！</p>
<button class="vote-btn">立即参与投票</button>
</section>
<footer>
<p>© 2026 舌尖上的流量研究小组 | 孔佳莉 刘妍 潘洋彤</p>
<p>数据来源：公开资料整理，仅供参考</p>
</footer>
</div>
<script>
// 时间轴交互功能
document.querySelectorAll('.timeline-dot').forEach(dot => {
dot.addEventListener('click', function() {
const year = this.parentElement.getAttribute('data-year');
showYearDetails(year);
});
});
// 默认显示2015年的详情
showYearDetails('2015');
function showYearDetails(year) {
const panel = document.getElementById('details-panel');
const title = document.getElementById('detail-title');
const description = document.getElementById('detail-description');
// 根据年份更新内容
const details = getYearDetails(year);
title.textContent = details.title;
description.textContent = details.description;
// 更新统计数据
document.querySelectorAll('.stat-value').forEach((stat, index) => {
stat.textContent = details.stats[index];
});
// 显示面板
panel.classList.add('active');
}
function getYearDetails(year) {
const details = {
'2015': {
title: '芝士榴莲饼 (2015)',
description: '2015年，芝士榴莲饼凭借"拉丝视觉+经典融合"的特点成为网红美食的开端。其爆火主要依赖微博平台的种草传播，线下排队成为典型特征。',
stats: ['65%', '5.8万', '2周', '微博']
},
'2016': {
title: '乌云冰淇淋 (2016)',
description: '2016年，乌云冰淇淋以"颜值噱头+甜系主导"为特色，通过美食博客传播，开启了打卡经济模式。',
stats: ['58%', '3.2万', '10天', '美食博客']
},
'2017': {
title: '抹茶脏脏包 (2017)',
description: '2017年，抹茶脏脏包凭借"吃后反差+网红元素"的特点，在社交平台实现刷屏式传播，成为年度爆款。',
stats: ['62%', '8.7万', '3周', '社交平台']
},
'2018': {
title: '毛巾卷蛋糕 (2018)',
description: '2018年，毛巾卷蛋糕以"视觉治愈+大众口味"为卖点，通过线下门店与线上种草联动的方式走红。',
stats: ['70%', '12.5万', '4周', '线上线下联动']
},
'2019': {
title: '螺蛳粉火锅 (2019)',
description: '2019年，螺蛳粉火锅凭借"跨品类融合+重味刺激"的特点，在抖音平台爆火，催生了居家复刻趋势。',
stats: ['55%', '15.3万', '5周', '抖音']
},
'2020': {
title: '爆浆流心蛋糕 (2020)',
description: '2020年，爆浆流心蛋糕以"流心视觉+口感升级"为特色，在小红书平台获得超过12万条笔记，成为传播核心阵地。',
stats: ['68%', '12万+', '6周', '小红书']
},
'2021': {
title: '脆哨拿铁 (2021)',
description: '2021年，脆哨拿铁凭借"甜咸碰撞+听觉吸睛"的特点出圈，探店vlog成为主要传播方式，带火了咖啡创新品类。',
stats: ['52%', '9.8万', '3周', '探店vlog']
},
'2022': {
title: '热奶宝 (2022)',
description: '2022年，热奶宝以"街头升级+分层颜值"为特色，成为年度顶流，依赖直播带货拉动销量峰值。',
stats: ['72%', '18.5万', '8周', '直播带货']
},
'2023': {
title: '芋泥麻薯蛋挞 (2023)',
description: '2023年，芋泥麻薯蛋挞凭借"主食+甜品重构"的创新组合走红，依赖社交共创扩大传播声量。',
stats: ['60%', '14.2万', '5周', '社交共创']
},
'2024': {
title: '固体杨枝甘露 (2024-2025)',
description: '2024-2025年，固体杨枝甘露以"形态改造+本土食材"为特色，依赖社交平台共创与社群分享，"社交共创"属性显著。',
stats: ['45%+40%', '22.3万', '7周', '社交平台共创']
}
};
return details[year] || details['2015'];
}
// 投票按钮交互
document.querySelector('.vote-btn').addEventListener('click', function() {
alert('投票功能即将开放！请关注我们的公众号获取最新投票链接。');
});
</script>
</body>
</html>](https://static.svgx.io/svgs/2026-01-15/88ec4c0a-18c0-4ff2-8fb7-f88f74a2d810.svg)
相关作品
