炫酷代码分享社区 - HTML实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeVerse | 极客代码分享社区</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 基础变量与重置 */
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--accent: #4cc9f0;
--dark: #1a1a2e;
--light: #f8f9fa;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
--gray: #6c757d;
--card-bg: rgba(255, 255, 255, 0.95);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--glow: 0 0 15px rgba(67, 97, 238, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background-color: #f5f7ff;
color: #333;
line-height: 1.6;
overflow-x: hidden;
}
/* 导航栏 */
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 1rem 2rem;
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
}
.logo i {
color: var(--accent);
filter: drop-shadow(0 0 5px rgba(76, 201, 240, 0.7));
}
.nav-links {
display: flex;
gap: 1.5rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav-links a:hover {
color: var(--accent);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
object-fit: cover;
cursor: pointer;
transition: var(--transition);
}
.user-avatar:hover {
transform: scale(1.1);
box-shadow: var(--glow);
}
/* 主要内容区 */
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* 搜索与发布区 */
.action-bar {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
align-items: center;
}
.search-container {
flex: 1;
min-width: 250px;
position: relative;
}
.search-bar {
width: 100%;
padding: 0.8rem 1rem 0.8rem 3rem;
border: none;
border-radius: 50px;
font-size: 1rem;
box-shadow: var(--shadow);
transition: var(--transition);
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 1rem center;
background-size: 20px;
}
.search-bar:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
transform: translateY(-2px);
}
.publish-btn {
background: linear-gradient(to right, var(--primary), var(--accent));
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.publish-btn:hover {
transform: translateY(-2px);
box-shadow: var(--glow);
}
/* 内容卡片网格 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.code-card {
background: var(--card-bg);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
height: 100%;
}
.code-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
/* 卡片封面区域 */
.card-cover {
position: relative;
height: 160px;
overflow: hidden;
}
.card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.code-card:hover .card-cover img {
transform: scale(1.05);
}
.cover-placeholder {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: var(--primary);
font-size: 3rem;
}
/* 卡片内容区域 */
.card-content {
padding: 1.2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--dark);
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-desc {
color: var(--gray);
font-size: 0.9rem;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
/* 标签样式 */
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tag {
background: #e0e7ff;
color: var(--primary);
padding: 0.2rem 0.6rem;
border-radius: 50px;
font-size: 0.7rem;
font-weight: 500;
transition: var(--transition);
}
.tag:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
/* 卡片底部信息 */
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 0.8rem;
border-top: 1px solid #eee;
}
.author-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
font-size: 0.8rem;
color: var(--gray);
}
.card-stats {
display: flex;
gap: 1rem;
}
.stat {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
color: var(--gray);
}
.stat i {
font-size: 0.9rem;
}
/* 响应式调整 */
@media (max-width: 768px) {
header {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.nav-links {
width: 100%;
justify-content: space-around;
}
.card-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.action-bar {
flex-direction: column;
}
.search-container, .publish-btn {
width: 100%;
}
.nav-links {
flex-wrap: wrap;
}
}
/* 特殊动画效果 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.publish-btn {
animation: float 3s ease-in-out infinite;
}
/* 流光边框效果 */
.search-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
var(--primary), var(--accent), var(--secondary), var(--primary));
background-size: 400%;
border-radius: 50px;
z-index: -1;
opacity: 0;
transition: 0.5s;
}
.search-container:focus-within::before {
opacity: 1;
animation: animate 8s linear infinite;
filter: blur(5px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 300% 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<i class="fas fa-code"></i>
<span>CodeVerse</span>
</div>
<nav class="nav-links">
<a href="#">首页</a>
<a href="#">热门</a>
<a href="#">分类</a>
<a href="#">教程</a>
<a href="#">关于</a>
</nav>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="user-avatar">
</header>
<main>
<div class="action-bar">
<div class="search-container">
<input type="text" class="search-bar" placeholder="搜索代码、标签或用户...">
</div>
<button class="publish-btn">
<i class="fas fa-plus"></i>
<span>发布代码</span>
</button>
</div>
<div class="card-grid">
<!-- 卡片1 - 有封面图 -->
<article class="code-card">
<div class="card-cover">
<img src="https://images.unsplash.com/photo-1555066931-43605d9670a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="代码封面">
</div>
<div class="card-content">
<h3 class="card-title">React 3D粒子动画效果实现</h3>
<p class="card-desc">使用React Three Fiber创建高性能的3D粒子动画，包含交互效果和响应式设计，适用于各种现代网站...</p>
<div class="card-tags">
<span class="tag">React</span>
<span class="tag">Three.js</span>
<span class="tag">动画</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">张伟</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 1.2k</span>
<span class="stat"><i class="far fa-heart"></i> 86</span>
</div>
</div>
</div>
</article>
<!-- 卡片2 - 无封面图 -->
<article class="code-card">
<div class="card-cover">
<div class="cover-placeholder">
<i class="fas fa-code"></i>
</div>
</div>
<div class="card-content">
<h3 class="card-title">纯CSS实现炫酷登录表单动画</h3>
<p class="card-desc">仅使用CSS和HTML创建具有流畅动画效果的登录表单，包含输入框聚焦动画、按钮悬停效果和错误状态处理...</p>
<div class="card-tags">
<span class="tag">CSS</span>
<span class="tag">动画</span>
<span class="tag">表单</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">李娜</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 892</span>
<span class="stat"><i class="far fa-heart"></i> 124</span>
</div>
</div>
</div>
</article>
<!-- 卡片3 - 有封面图 -->
<article class="code-card">
<div class="card-cover">
<img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="代码封面">
</div>
<div class="card-content">
<h3 class="card-title">Vue3 + TypeScript全栈项目架构</h3>
<p class="card-desc">从零搭建Vue3企业级项目架构，包含TypeScript支持、Pinia状态管理、Vite配置优化和自动化部署方案...</p>
<div class="card-tags">
<span class="tag">Vue3</span>
<span class="tag">TypeScript</span>
<span class="tag">架构</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">王强</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 2.4k</span>
<span class="stat"><i class="far fa-heart"></i> 312</span>
</div>
</div>
</div>
</article>
<!-- 卡片4 - 无封面图 -->
<article class="code-card">
<div class="card-cover">
<div class="cover-placeholder">
<i class="fas fa-laptop-code"></i>
</div>
</div>
<div class="card-content">
<h3 class="card-title">Node.js高性能REST API最佳实践</h3>
<p class="card-desc">使用Express.js和MongoDB构建高性能API的完整指南，包含JWT认证、速率限制、缓存策略和错误处理...</p>
<div class="card-tags">
<span class="tag">Node.js</span>
<span class="tag">API</span>
<span class="tag">MongoDB</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">陈静</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 1.8k</span>
<span class="stat"><i class="far fa-heart"></i> 245</span>
</div>
</div>
</div>
</article>
<!-- 卡片5 - 有封面图 -->
<article class="code-card">
<div class="card-cover">
<img src="https://images.unsplash.com/photo-1542903660-eedba2cda473?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="代码封面">
</div>
<div class="card-content">
<h3 class="card-title">WebGL实现流体模拟效果</h3>
<p class="card-desc">基于WebGL的流体动力学模拟，使用GLSL着色器实现高性能计算，可应用于游戏特效和创意网站背景...</p>
<div class="card-tags">
<span class="tag">WebGL</span>
<span class="tag">GLSL</span>
<span class="tag">图形学</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/men/68.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">赵明</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 3.1k</span>
<span class="stat"><i class="far fa-heart"></i> 498</span>
</div>
</div>
</div>
</article>
<!-- 卡片6 - 无封面图 -->
<article class="code-card">
<div class="card-cover">
<div class="cover-placeholder">
<i class="fas fa-mobile-alt"></i>
</div>
</div>
<div class="card-content">
<h3 class="card-title">Flutter跨平台应用开发实战</h3>
<p class="card-desc">使用Flutter构建iOS和Android双平台应用的完整教程，包含状态管理、原生模块集成和性能优化技巧...</p>
<div class="card-tags">
<span class="tag">Flutter</span>
<span class="tag">移动开发</span>
<span class="tag">Dart</span>
</div>
<div class="card-footer">
<div class="author-info">
<img src="https://randomuser.me/api/portraits/women/28.jpg" alt="作者头像" class="author-avatar">
<span class="author-name">刘芳</span>
</div>
<div class="card-stats">
<span class="stat"><i class="far fa-eye"></i> 1.5k</span>
<span class="stat"><i class="far fa-heart"></i> 187</span>
</div>
</div>
</div>
</article>
</div>
</main>
</body>
</html>设计亮点说明
视觉层次：
- 采用蓝紫色科技感配色方案，符合技术社区调性
- 卡片悬浮效果增强交互感
- 封面图与占位图智能切换展示
动态效果：
- 搜索框流光边框动画（纯CSS实现）
- 发布按钮浮动效果
- 卡片悬停3D提升效果
- 封面图片缩放动画
内容展示：
- 响应式网格布局，适配各种屏幕
- 标题和描述文字截断，保持整齐
- 标签云交互效果
- 作者信息和统计数据清晰展示
用户体验：
- 完全无JavaScript依赖
- 移动端优先的响应式设计
- 清晰的视觉层次和操作引导
- 符合大众审美的现代设计风格
这个实现完全符合您要求的"炫酷大气"的代码分享社区风格，同时保持了良好的可读性和用户体验。
需支付 5元 阅读剩余内容
