Product#
packaging——产品包装设计 ]
<!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;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
/* 案例展示区 */
.portfolio-section {
max-width: 1400px;
margin: 0 auto;
padding: 80px 20px;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
color: #222;
margin-bottom: 15px;
letter-spacing: -0.5px;
}
.section-subtitle {
font-size: 1.2rem;
color: #666;
max-width: 700px;
margin: 0 auto;
}
/* 分类筛选 */
.filter-controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.filter-btn {
padding: 10px 20px;
background: transparent;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover, .filter-btn.active {
background: #222;
color: white;
border-color: #222;
}
/* 案例网格 */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.portfolio-item {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.portfolio-image {
position: relative;
overflow: hidden;
height: 280px;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.portfolio-item:hover .portfolio-image img {
transform: scale(1.05);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 25px;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-category {
display: inline-block;
font-size: 0.85rem;
color: white;
background: rgba(255,255,255,0.2);
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 10px;
backdrop-filter: blur(5px);
}
.portfolio-title {
font-size: 1.6rem;
font-weight: 600;
color: white;
margin-bottom: 8px;
}
.portfolio-description {
font-size: 0.95rem;
color: rgba(255,255,255,0.8);
margin-bottom: 15px;
}
.view-btn {
align-self: flex-start;
padding: 10px 25px;
background: white;
color: #222;
border: none;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.view-btn:hover {
background: #f1f1f1;
transform: translateY(-2px);
}
/* 案例详情弹窗 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
overflow-y: auto;
padding: 40px 20px;
}
.modal-content {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
animation: modalFadeIn 0.4s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header {
padding: 25px;
border-bottom: 1px solid #eee;
position: relative;
}
.modal-title {
font-size: 1.8rem;
margin-bottom: 5px;
}
.modal-subtitle {
font-size: 1rem;
color: #666;
}
.close-btn {
position: absolute;
top: 25px;
right: 25px;
font-size: 1.5rem;
cursor: pointer;
color: #999;
transition: color 0.3s ease;
}
.close-btn:hover {
color: #333;
}
.modal-body {
padding: 30px;
}
.modal-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 30px;
}
.modal-description {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
margin-bottom: 30px;
}
.modal-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.feature-item {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.feature-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
color: #222;
}
.feature-value {
font-size: 0.95rem;
color: #666;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.portfolio-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.portfolio-image {
height: 250px;
}
}
@media (max-width: 768px) {
.portfolio-section {
padding: 60px 15px;
}
.section-title {
font-size: 2.2rem;
}
.section-subtitle {
font-size: 1rem;
}
.portfolio-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.portfolio-image {
height: 220px;
}
.modal-body {
padding: 20px;
}
.modal-image {
height: 300px;
}
}
@media (max-width: 576px) {
.portfolio-section {
padding: 50px 10px;
}
.section-header {
margin-bottom: 40px;
}
.section-title {
font-size: 1.8rem;
}
.filter-controls {
margin-bottom: 30px;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.modal-header {
padding: 20px;
}
.modal-title {
font-size: 1.5rem;
}
.modal-image {
height: 250px;
}
.modal-features {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- 案例展示区 -->
<section class="portfolio-section">
<div class="section-header">
<h1 class="section-title">品牌设计案例</h1>
<p class="section-subtitle">我们为全球客户打造独特的品牌形象，从策略到视觉的完整解决方案</p>
</div>
<!-- 分类筛选 -->
<div class="filter-controls">
<button class="filter-btn active" data-filter="all">全部案例</button>
<button class="filter-btn" data-filter="branding">品牌设计</button>
<button class="filter-btn" data-filter="packaging">包装设计</button>
<button class="filter-btn" data-filter="digital">数字品牌</button>
<button class="filter-btn" data-filter="identity">视觉识别</button>
</div>
<!-- 案例网格 -->
<div class="portfolio-grid">
<!-- 案例1 -->
<div class="portfolio-item" data-category="branding">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="NOVA科技品牌设计">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">品牌设计</span>
<h3 class="portfolio-title">NOVA科技</h3>
<p class="portfolio-description">为科技初创企业打造的未来感品牌形象</p>
<button class="view-btn" data-modal="modal1">查看案例</button>
</div>
</div>
<!-- 案例2 -->
<div class="portfolio-item" data-category="packaging">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="ORIGIN有机食品包装设计">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">包装设计</span>
<h3 class="portfolio-title">ORIGIN有机食品</h3>
<p class="portfolio-description">环保理念的可持续包装系统设计</p>
<button class="view-btn" data-modal="modal2">查看案例</button>
</div>
</div>
<!-- 案例3 -->
<div class="portfolio-item" data-category="digital">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="STREAM数字平台品牌设计">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">数字品牌</span>
<h3 class="portfolio-title">STREAM平台</h3>
<p class="portfolio-description">流媒体服务的动态品牌视觉系统</p>
<button class="view-btn" data-modal="modal3">查看案例</button>
</div>
</div>
<!-- 案例4 -->
<div class="portfolio-item" data-category="identity">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="URBAN咖啡视觉识别">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">视觉识别</span>
<h3 class="portfolio-title">URBAN咖啡</h3>
<p class="portfolio-description">精品咖啡连锁店的完整VI系统</p>
<button class="view-btn" data-modal="modal4">查看案例</button>
</div>
</div>
<!-- 案例5 -->
<div class="portfolio-item" data-category="branding">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="ELEGANCE奢侈品品牌设计">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">品牌设计</span>
<h3 class="portfolio-title">ELEGANCE</h3>
<p class="portfolio-description">高端奢侈品牌的极简主义设计</p>
<button class="view-btn" data-modal="modal5">查看案例</button>
</div>
</div>
<!-- 案例6 -->
<div class="portfolio-item" data-category="packaging">
<div class="portfolio-image">
<img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="VITA饮品包装设计">
</div>
<div class="portfolio-overlay">
<span class="portfolio-category">包装设计</span>
<h3 class="portfolio-title">VITA饮品</h3>
<p class="portfolio-description">健康饮料系列的创新包装解决方案</p>
<button class="view-btn" data-modal="modal6">查看案例</button>
</div>
</div>
</div>
</section>
<!-- 案例详情弹窗1 -->
<div id="modal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">NOVA科技品牌设计</h2>
<p class="modal-subtitle">品牌设计 / 科技行业</p>
<span class="close-btn">×</span>
</div>
<div class="modal-body">
<img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="NOVA科技品牌设计" class="modal-image">
<p class="modal-description">
NOVA科技是一家专注于人工智能解决方案的初创企业。我们为其打造了完整的品牌形象系统，包括标志设计、品牌色彩、字体系统和视觉语言。设计灵感来源于宇宙和科技的结合，创造出既专业又富有未来感的品牌形象。
</p>
<div class="modal-features">
<div class="feature-item">
<div class="feature-title">服务内容</div>
<div class="feature-value">品牌策略、标志设计、VI系统</div>
</div>
<div class="feature-item">
<div class="feature-title">行业</div>
<div class="feature-value">人工智能、科技</div>
</div>
<div class="feature-item">
<div class="feature-title">时间</div>
<div class="feature-value">2022年3月</div>
</div>
<div class="feature-item">
<div class="feature-title">客户评价</div>
<div class="feature-value">"完美捕捉了我们品牌的未来愿景"</div>
</div>
</div>
</div>
</div>
</div>
<!-- 可以继续添加更多弹窗 -->
<script>
// 筛选功能
const filterBtns = document.querySelectorAll('.filter-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 更新活动按钮样式
filterBtns.forEach(btn => btn.classList.remove('active'));
btn.classList.add('active');
const filter = btn.getAttribute('data-filter');
// 筛选项目
portfolioItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// 弹窗功能
const viewBtns = document.querySelectorAll('.view-btn');
const modals = document.querySelectorAll('.modal');
const closeBtns = document.querySelectorAll('.close-btn');
viewBtns.forEach(btn => {
btn.addEventListener('click', () => {
const modalId = btn.getAttribute('data-modal');
document.getElementById(modalId).style.display = 'block';
document.body.style.overflow = 'hidden';
});
});
closeBtns.forEach(btn => {
btn.addEventListener('click', () => {
btn.closest('.modal').style.display = 'none';
document.body.style.overflow = 'auto';
});
});
// 点击模态框外部关闭
window.addEventListener('click', (e) => {
if (e.target.classList.contains('modal')) {
e.target.style.display = 'none';
document.body.style.overflow = 'auto';
}
});
</script>
</body>
</html>