PNG透明素材下载网站设计
基于您的要求，我将设计一个现代简洁、绿色系为主的PNG素材下载网站。以下是完整的HTML/CSS/JavaScript实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明素材库 - 高品质PNG透明背景素材下载</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #0eb83a;
--primary-light: #4fd164;
--primary-dark: #0a8a2a;
--secondary-color: #f8f9fa;
--text-color: #333;
--light-text: #777;
--border-radius: 12px;
--box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: var(--text-color);
line-height: 1.6;
}
/* Header 样式 */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
padding: 15px 5%;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.logo h1 {
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin: 0 15px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
padding: 8px 12px;
border-radius: var(--border-radius);
transition: var(--transition);
}
nav ul li a:hover {
color: var(--primary-color);
background-color: rgba(14, 184, 58, 0.1);
}
.auth-buttons .btn {
padding: 8px 20px;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
margin-left: 10px;
}
.btn-login {
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-login:hover {
background-color: rgba(14, 184, 58, 0.1);
}
.btn-register {
background-color: var(--primary-color);
color: white;
}
.btn-register:hover {
background-color: var(--primary-dark);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--primary-color);
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dropdown-menu {
position: absolute;
right: 0;
top: 50px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
width: 180px;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 10;
}
.dropdown-menu.active {
opacity: 1;
visibility: visible;
}
.dropdown-menu a {
display: block;
padding: 12px 20px;
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
}
.dropdown-menu a:hover {
background-color: rgba(14, 184, 58, 0.1);
color: var(--primary-color);
}
/* 主内容区样式 */
main {
max-width: 1400px;
margin: 0 auto;
padding: 30px 5%;
}
/* 搜索区样式 */
.search-section {
text-align: center;
margin-bottom: 40px;
}
.search-section h2 {
font-size: 32px;
margin-bottom: 20px;
color: var(--primary-dark);
}
.search-section p {
color: var(--light-text);
margin-bottom: 30px;
font-size: 16px;
}
.search-box {
position: relative;
max-width: 700px;
margin: 0 auto 30px;
}
.search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 50px;
border: 2px solid #ddd;
font-size: 16px;
outline: none;
transition: var(--transition);
}
.search-box input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(14, 184, 58, 0.2);
}
.search-box button {
position: absolute;
right: 5px;
top: 5px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
padding: 10px 25px;
cursor: pointer;
font-weight: 500;
transition: var(--transition);
}
.search-box button:hover {
background-color: var(--primary-dark);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.tag-cloud a {
display: inline-block;
padding: 6px 15px;
background-color: rgba(14, 184, 58, 0.1);
color: var(--primary-dark);
border-radius: 50px;
font-size: 14px;
text-decoration: none;
transition: var(--transition);
}
.tag-cloud a:hover {
background-color: var(--primary-color);
color: white;
}
/* 分类筛选区样式 */
.filter-section {
background-color: white;
border-radius: var(--border-radius);
padding: 20px;
margin-bottom: 30px;
box-shadow: var(--box-shadow);
}
.filter-tabs {
display: flex;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.filter-tab {
padding: 10px 20px;
cursor: pointer;
font-weight: 500;
color: var(--light-text);
border-bottom: 3px solid transparent;
transition: var(--transition);
}
.filter-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.filter-tab:hover:not(.active) {
color: var(--text-color);
}
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-option {
padding: 8px 15px;
background-color: var(--secondary-color);
border-radius: var(--border-radius);
font-size: 14px;
cursor: pointer;
transition: var(--transition);
}
.filter-option:hover {
background-color: rgba(14, 184, 58, 0.1);
color: var(--primary-color);
}
.filter-option.active {
background-color: var(--primary-color);
color: white;
}
/* 素材列表区样式 */
.materials-section h3 {
font-size: 24px;
margin-bottom: 20px;
color: var(--primary-dark);
}
.materials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
}
.material-card {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
}
.material-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.material-thumbnail {
height: 200px;
position: relative;
overflow: hidden;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
}
.material-thumbnail img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: var(--transition);
}
.material-card:hover .material-thumbnail img {
transform: scale(1.05);
}
.material-info {
padding: 15px;
position: relative;
}
.material-title {
font-weight: 600;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.material-meta {
display: flex;
justify-content: space-between;
color: var(--light-text);
font-size: 13px;
}
.material-actions {
position: absolute;
top: -30px;
right: 15px;
display: flex;
gap: 10px;
opacity: 0;
transition: var(--transition);
}
.material-card:hover .material-actions {
opacity: 1;
top: 15px;
}
.action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.action-btn:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}
/* 页脚样式 */
footer {
background-color: #222;
color: #ddd;
padding: 50px 5% 30px;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.footer-logo img {
height: 30px;
margin-right: 10px;
}
.footer-logo h2 {
font-size: 20px;
color: white;
}
.footer-about p {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.7;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
transition: var(--transition);
}
.social-links a:hover {
background-color: var(--primary-color);
transform: translateY(-3px);
}
.footer-links h3 {
color: white;
font-size: 18px;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-links h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background-color: var(--primary-color);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #aaa;
text-decoration: none;
transition: var(--transition);
font-size: 14px;
}
.footer-links a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.footer-contact p {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 14px;
}
.footer-contact i {
margin-right: 10px;
color: var(--primary-color);
width: 20px;
text-align: center;
}
.copyright {
text-align: center;
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 13px;
color: #777;
}
/* 响应式调整 */
@media (max-width: 1200px) {
nav ul li {
margin: 0 10px;
}
}
@media (max-width: 992px) {
.header-container {
flex-direction: column;
gap: 15px;
}
nav ul {
margin: 15px 0;
}
}
@media (max-width: 768px) {
.materials-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.filter-tabs {
overflow-x: auto;
padding-bottom: 10px;
}
.filter-tab {
white-space: nowrap;
}
}
</style>
</head>
<body>
<!-- Header 头部 -->
<header>
<div class="header-container">
<div class="logo">
<img src="https://via.placeholder.com/40x40/0eb83a/ffffff?text=PNG" alt="透明素材库Logo">
<h1>透明素材库</h1>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">PNG素材</a></li>
<li><a href="#">矢量图</a></li>
<li><a href="#">背景图</a></li>
<li><a href="#">图标</a></li>
<li><a href="#">插画</a></li>
</ul>
</nav>
<div class="auth-buttons">
<!-- 未登录状态 -->
<a href="#" class="btn btn-login">登录</a>
<a href="#" class="btn btn-register">注册</a>
<!-- 登录状态 (注释掉) -->
<!--
<div class="user-avatar">
<img src="https://via.placeholder.com/40x40" alt="用户头像">
<div class="dropdown-menu">
<a href="#"><i class="fas fa-user"></i> 个人中心</a>
<a href="#"><i class="fas fa-download"></i> 我的下载</a>
<a href="#"><i class="fas fa-heart"></i> 我的收藏</a>
<a href="#"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
</div>
</div>
-->
</div>
</div>
</header>
<!-- 主内容区 -->
<main>
<!-- 搜索区 -->
<section class="search-section">
<h2>发现高品质透明背景素材</h2>
<p>超过10万+ PNG透明背景素材免费下载，商业用途无版权限制</p>
<div class="search-box">
<input type="text" placeholder="搜索您需要的透明素材...">
<button><i class="fas fa-search"></i> 搜索</button>
</div>
<div class="tag-cloud">
<a href="#">电商素材</a>
<a href="#">节日元素</a>
<a href="#">自然风景</a>
<a href="#">人物剪影</a>
<a href="#">动物图案</a>
<a href="#">植物花卉</a>
<a href="#">美食饮品</a>
<a href="#">科技元素</a>
</div>
</section>
<!-- 分类筛选区 -->
<section class="filter-section">
<div class="filter-tabs">
<div class="filter-tab active">全部</div>
<div class="filter-tab">PNG</div>
<div class="filter-tab">SVG</div>
<div class="filter-tab">JPG</div>
<div class="filter-tab">PSD</div>
<div class="filter-tab">AI</div>
</div>
<div class="filter-options">
<div class="filter-option active">全部</div>
<div class="filter-option">最新上传</div>
<div class="filter-option">热门下载</div>
<div class="filter-option">高分辨率</div>
<div class="filter-option">免抠图</div>
<div class="filter-option">商业用途</div>
<div class="filter-option">免费授权</div>
</div>
</section>
<!-- 素材列表区 -->
<section class="materials-section">
<h3>精选透明素材</h3>
<div class="materials-grid">
<!-- 素材卡片 1 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=透明树叶" alt="透明树叶素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">绿色树叶透明背景PNG</div>
<div class="material-meta">
<span>3000×2000</span>
<span>2.4MB</span>
</div>
</div>
</div>
<!-- 素材卡片 2 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=透明气泡" alt="透明气泡素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">水泡效果透明背景PNG</div>
<div class="material-meta">
<span>4000×3000</span>
<span>3.1MB</span>
</div>
</div>
</div>
<!-- 素材卡片 3 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=人物剪影" alt="人物剪影素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">商务人物剪影透明PNG</div>
<div class="material-meta">
<span>2500×3500</span>
<span>1.8MB</span>
</div>
</div>
</div>
<!-- 素材卡片 4 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=科技元素" alt="科技元素素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">科技感线条透明背景PNG</div>
<div class="material-meta">
<span>5000×3000</span>
<span>4.2MB</span>
</div>
</div>
</div>
<!-- 素材卡片 5 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=节日装饰" alt="节日装饰素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">圣诞节日装饰透明PNG</div>
<div class="material-meta">
<span>3500×3500</span>
<span>2.7MB</span>
</div>
</div>
</div>
<!-- 素材卡片 6 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=动物图案" alt="动物图案素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">野生动物透明背景PNG</div>
<div class="material-meta">
<span>4000×2500</span>
<span>3.5MB</span>
</div>
</div>
</div>
<!-- 素材卡片 7 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=美食元素" alt="美食元素素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">美食饮品透明背景PNG</div>
<div class="material-meta">
<span>3000×3000</span>
<span>2.1MB</span>
</div>
</div>
</div>
<!-- 素材卡片 8 -->
<div class="material-card">
<div class="material-thumbnail">
<img src="https://via.placeholder.com/300x200/ffffff/0eb83a?text=抽象图形" alt="抽象图形素材">
</div>
<div class="material-actions">
<div class="action-btn"><i class="fas fa-heart"></i></div>
<div class="action-btn"><i class="fas fa-download"></i></div>
</div>
<div class="material-info">
<div class="material-title">抽象几何图形透明PNG</div>
<div class="material-meta">
<span>5000×5000</span>
<span>5.3MB</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer 页脚 -->
<footer>
<div class="footer-container">
<div class="footer-about">
<div class="footer-logo">
<img src="https://via.placeholder.com/30x30/0eb83a/ffffff?text=PNG" alt="透明素材库Logo">
<h2>透明素材库</h2>
</div>
<p>我们提供高品质的透明背景素材下载，所有素材均可免费用于个人和商业项目，无需署名。</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
</div>
</div>
<div class="footer-links">
<h3>快速链接</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<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-links">
<h3>素材分类</h3>
<ul>
<li><a href="#">PNG透明图</a></li>
<li><a href="#">矢量图(SVG)</a></li>
<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-contact">
<h3>联系我们</h3>
<p><i class="fas fa-envelope"></i> contact@pngmaterials.com</p>
<p><i class="fas fa-phone-alt"></i> +86 400-123-4567</p>
<p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区创意产业园A座1008</p>
<p><i class="fas fa-clock"></i> 周一至周五 9:00-18:00</p>
</div>
</div>
<div class="copyright">
<p>© 2023 透明素材库. 保留所有权利. | <a href="#">隐私政策</a> | <a href="#">服务条款</a></p>
</div>
</footer>
<script>
// 用户头像下拉菜单交互
document.addEventListener('DOMContentLoaded', function() {
// 如果有用户头像，添加点击事件
const userAvatar = document.querySelector('.user-avatar');
if (userAvatar) {
const dropdownMenu = document.querySelector('.dropdown-menu');
userAvatar.addEventListener('click', function(e) {
e.stopPropagation();
dropdownMenu.classList.toggle('active');
});
// 点击页面其他位置关闭下拉菜单
document.addEventListener('click', function() {
dropdownMenu.classList.remove('active');
});
}
// 分类标签切换
const filterTabs = document.querySelectorAll('.filter-tab');
filterTabs.forEach(tab => {
tab.addEventListener('click', function() {
filterTabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
// 筛选选项切换
const filterOptions = document.querySelectorAll('.filter-option');
filterOptions.forEach(option => {
option.addEventListener('click', function() {
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
filterOptions.forEach(opt => opt.classList.remove('active'));
this.classList.add('active');
}
});
});
// 素材卡片悬停效果
const materialCards = document.querySelectorAll('.material-card');
materialCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 12px 28px rgba(0, 0, 0, 0.15)';
const img = this.querySelector('.material-thumbnail img');
if (img) {
img.style.transform = 'scale(1.05)';
}
const actions = this.querySelector('.material-actions');
if (actions) {
actions.style.opacity = '1';
actions.style.top = '15px';
}
});
card.addEventListener('mouseleave', function() {
this.style.transform = '';
this.style.boxShadow = '';
const img = this.querySelector('.material-thumbnail img');
if (img) {
img.style.transform = '';
}
const actions = this.querySelector('.material-actions');
if (actions) {
actions.style.opacity = '0';
actions.style.top = '-30px';
}
});
});
});
</script>
</body>
</html>设计亮点
配色方案：
- 以#0eb83a绿色系为主色调，搭配清新明亮的配色
- 使用不同深浅的绿色创造层次感
- 白色背景和浅灰色文字确保良好的可读性
圆角设计：
- 所有按钮、卡片和容器都采用圆角设计
- 搜索框采用大圆角(50px)创造独特视觉效果
- 卡片悬停时有轻微上浮动画
现代简洁风格：
- 清晰的布局结构
- 充足的留白空间
- 简洁的图标和排版
交互效果：
- 悬停动画：卡片悬停时上浮、阴影加深、图片轻微放大
- 操作按钮：收藏和下载按钮在悬停时优雅出现
- 下拉菜单：用户头像点击后平滑展开
主要模块实现：
- Header头部：左侧Logo，中间主导航，右侧登录/注册按钮
- 搜索区：大型居中搜索框，下方热门标签云
- 分类筛选：横向标签和筛选选项
- 素材列表：网格布局，悬停显示详细信息
- Footer页脚：多栏布局，包含版权信息和联系方式
这个设计完全使用纯HTML/CSS/JavaScript实现，无需任何外部框架，确保了高性能和快速加载。
需支付 5元 阅读剩余内容
