我来为你设计一个现代化的个人作品集网页,包含响应式设计和丰富的交互效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">张三 - 前端开发工程师</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--text-dark: #1f2937;
--text-light: #6b7280;
--bg-light: #f9fafb;
--bg-white: #ffffff;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
}
/* 导航栏 */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: var(--transition);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
position: relative;
transition: var(--transition);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle span {
width: 25px;
height: 3px;
background: var(--text-dark);
margin: 3px 0;
transition: var(--transition);
}
/* 英雄区域 */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,112C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
animation: wave 20s linear infinite;
}
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 3.5rem;
color: white;
margin-bottom: 1rem;
animation: fadeInUp 0.8s ease;
}
.hero-content .subtitle {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease 0.2s both;
}
.hero-buttons {
display: flex;
gap: 1rem;
animation: fadeInUp 0.8s ease 0.4s both;
}
.btn {
padding: 0.8rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: white;
color: var(--primary-color);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: var(--primary-color);
}
.hero-image {
position: relative;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.hero-image img {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 20px;
box-shadow: var(--shadow);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 技能部分 */
.skills {
padding: 5rem 2rem;
background: var(--bg-light);
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--text-dark);
}
.skills-container {
max-width: 1200px;
margin: 0 auto;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.skill-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
}
.skill-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.skill-icon {
font-size: 3rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.skill-name {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.skill-level {
color: var(--text-light);
}
/* 项目展示 */
.projects {
padding: 5rem 2rem;
background: white;
}
.projects-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--bg-light);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
}
.project-card:hover {
transform: scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.project-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.project-content {
padding: 1.5rem;
}
.project-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.project-description {
color: var(--text-light);
margin-bottom: 1rem;
}
.project-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag {
background: var(--primary-color);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
}
/* 联系表单 */
.contact {
padding: 5rem 2rem;
background: var(--bg-light);
}
.contact-container {
max-width: 800px;
margin: 0 auto;
}
.contact-form {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-dark);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.8rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 3rem;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
width: 100%;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}
/* 页脚 */
footer {
background: var(--text-dark);
color: white;
text-align: center;
padding: 2rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.social-links a {
color: white;
font-size: 1.5rem;
transition: var(--transition);
}
.social-links a:hover {
color: var(--primary-color);
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.menu-toggle {
display: flex;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
/* 加载动画 */
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.loader.hidden {
opacity: 0;
pointer-events: none;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 提示消息 */
.toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--primary-color);
color: white;
padding: 1rem 2rem;
border-radius: 8px;
box-shadow: var(--shadow);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 1001;
}
.toast.show {
transform: translateX(0);
}
</style>
</head>
<body>
<!-- 加载动画 -->
<div class="loader" id="loader">
<div class="loader-spinner"></div>
</div>
<!-- 导航栏 -->
<nav id="navbar">
<div class="nav-container">
<div class="logo">张三</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系</a></li>
</ul>
<div class="menu-toggle" id="menuToggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="hero" id="home">
<div class="hero-container">
<div class="hero-content">
<h1>你好，我是张三</h1>
<p class="subtitle">前端开发工程师 | UI/UX设计师</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">查看作品</a>
<a href="#contact" class="btn btn-secondary">联系我</a>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/seed/developer/400/400.jpg" alt="个人照片">
</div>
</div>
</section>
<!-- 技能部分 -->
<section class="skills" id="skills">
<h2 class="section-title">专业技能</h2>
<div class="skills-container">
<div class="skills-grid">
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-html5"></i>
</div>
<h3 class="skill-name">HTML/CSS</h3>
<p class="skill-level">精通</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-js"></i>
</div>
<h3 class="skill-name">JavaScript</h3>
<p class="skill-level">精通</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-react"></i>
</div>
<h3 class="skill-name">React</h3>
<p class="skill-level">熟练</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-vuejs"></i>
</div>
<h3 class="skill-name">Vue.js</h3>
<p class="skill-level">熟练</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-node-js"></i>
</div>
<h3 class="skill-name">Node.js</h3>
<p class="skill-level">了解</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fas fa-database"></i>
</div>
<h3 class="skill-name">数据库</h3>
<p class="skill-level">了解</p>
</div>
</div>
</div>
</section>
<!-- 项目展示 -->
<section class="projects" id="projects">
<h2 class="section-title">精选项目</h2>
<div class="projects-grid">
<div class="project-card">
<img src="https://picsum.photos/seed/project1/400/200.jpg" alt="项目1" class="project-image">
<div class="project-content">
<h3 class="project-title">电商平台</h3>
<p class="project-description">一个功能完整的电商平台，包含商品展示、购物车、支付等功能。</p>
<div class="project-tags">
<span class="tag">React</span>
<span class="tag">Redux</span>
<span class="tag">Node.js</span>
</div>
</div>
</div>
<div class="project-card">
<img src="https://picsum.photos/seed/project2/400/200.jpg" alt="项目2" class="project-image">
<div class="project-content">
<h3 class="project-title">任务管理系统</h3>
<p class="project-description">基于Vue.js的团队协作任务管理工具，支持实时同步。</p>
<div class="project-tags">
<span class="tag">Vue.js</span>
<span class="tag">Vuex</span>
<span class="tag">Socket.io</span>
</div>
</div>
</div>
<div class="project-card">
<img src="https://picsum.photos/seed/project3/400/200.jpg" alt="项目3" class="project-image">
<div class="project-content">
<h3 class="project-title">数据可视化平台</h3>
<p class="project-description">使用D3.js和ECharts构建的数据分析和可视化平台。</p>
<div class="project-tags">
<span class="tag">D3.js</span>
<span class="tag">ECharts</span>
<span class="tag">TypeScript</span>
</div>
</div>
</div>
</div>
</section>
<!-- 联系表单 -->
<section class="contact" id="contact">
<h2 class="section-title">联系我</h2>
<div class="contact-container">
<form class="contact-form" id="contactForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">留言</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="submit-btn">发送消息</button>
</form>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<p>© 2025 张三. All rights reserved.</p>
</footer>
<!-- 提示消息 -->
<div class="toast" id="toast"></div>
<script>
// 页面加载完成后隐藏加载动画
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loader').classList.add('hidden');
}, 500);
});
// 导航栏滚动效果
let lastScroll = 0;
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
}
lastScroll = currentScroll;
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// 移动端菜单切换
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
navLinks.style.position = 'absolute';
navLinks.style.top = '100%';
navLinks.style.left = '0';
navLinks.style.right = '0';
navLinks.style.background = 'white';
navLinks.style.flexDirection = 'column';
navLinks.style.padding = '1rem';
navLinks.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
});
// 表单提交处理
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// 获取表单数据
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// 显示提示消息
showToast('消息已发送！我会尽快回复您。');
// 重置表单
this.reset();
});
// 显示提示消息
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// 技能卡片点击效果
document.querySelectorAll('.skill-card').forEach(card => {
card.addEventListener('click', function() {
const skillName = this.querySelector('.skill-name').textContent;
showToast(`您点击了 ${skillName} 技能`);
});
});
// 项目卡片点击效果
document.querySelectorAll('.project-card').forEach(card => {
card.addEventListener('click', function() {
const projectTitle = this.querySelector('.project-title').textContent;
showToast(`查看项目：${projectTitle}`);
});
});
// 滚动时的动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 观察所有需要动画的元素
document.querySelectorAll('.skill-card, .project-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>
这个网页设计包含了以下特点：
-
现代化设计
- 渐变色背景和按钮
- 卡片式布局
- 流畅的动画效果
- 响应式设计
-
功能特性
- 固定导航栏,滚动时效果变化
- 平滑滚动到各个部分
- 交互式技能卡片
- 项目展示画廊
- 联系表单
- 加载动画
- 提示消息系统
-
视觉效果
（图片来源网络，侵删）- 悬浮动画
- 渐入效果
- 阴影和过渡效果
- 波浪背景动画
- 图标集成（Font Awesome）
-
响应式布局
- 移动端菜单
- 自适应网格布局
- 灵活的断点设置
你可以根据需要修改颜色、内容、图片等来个性化这个网页。
（图片来源网络，侵删）
