我将为您生成一个完整的文章详情页代码，包含付费墙、打赏、收藏、点赞和分享功能。以下是纯HTML/CSS实现，使用Font Awesome 6.4.0图标，并添加了动画效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章详情 - 付费阅读</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #667eea;
--primary-light: #a3bffa;
--primary-dark: #5a67d8;
--text-color: #2d3748;
--text-light: #718096;
--bg-color: #ffffff;
--border-radius: 12px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--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: #f8fafc;
color: var(--text-color);
line-height: 1.6;
padding: 20px;
}
.article-container {
max-width: 800px;
margin: 0 auto;
background-color: var(--bg-color);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.article-header {
padding: 30px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
text-align: center;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.article-title {
font-size: 2rem;
margin-bottom: 10px;
font-weight: 700;
}
.article-meta {
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.9rem;
opacity: 0.9;
}
.article-content {
padding: 30px;
position: relative;
}
.article-text {
margin-bottom: 20px;
line-height: 1.8;
}
.preview-content {
position: relative;
overflow: hidden;
max-height: 300px;
transition: max-height 0.5s ease;
}
.preview-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.full-content {
display: none;
animation: fadeIn 0.5s ease-out;
}
.paywall {
text-align: center;
margin: 30px 0;
padding: 20px;
background-color: #f7fafc;
border-radius: var(--border-radius);
border: 1px dashed var(--primary-light);
}
.paywall-title {
font-size: 1.2rem;
margin-bottom: 15px;
color: var(--primary-dark);
}
.pay-button {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
border: none;
padding: 12px 30px;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
display: inline-flex;
align-items: center;
gap: 8px;
}
.pay-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(102, 126, 234, 0.4);
}
.pay-button:active {
transform: translateY(0);
}
.payment-form {
display: none;
margin-top: 20px;
padding: 20px;
background-color: #f7fafc;
border-radius: var(--border-radius);
border: 1px solid #e2e8f0;
animation: fadeIn 0.3s ease-out;
}
.payment-form.show {
display: block;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.form-group input, .form-group select {
width: 100%;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 1rem;
}
.submit-payment {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
width: 100%;
}
.submit-payment:hover {
background-color: var(--primary-dark);
}
.article-footer {
display: flex;
justify-content: space-between;
padding: 20px 30px;
border-top: 1px solid #edf2f7;
flex-wrap: wrap;
gap: 15px;
}
.action-buttons {
display: flex;
gap: 15px;
}
.action-button {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background-color: #f7fafc;
border: 1px solid #e2e8f0;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
font-size: 0.9rem;
}
.action-button:hover {
background-color: #edf2f7;
transform: translateY(-2px);
}
.action-button.active {
color: var(--primary-color);
border-color: var(--primary-light);
}
.action-button.liked {
color: #e53e3e;
border-color: #fed7d7;
}
.action-button.bookmarked {
color: #38a169;
border-color: #c6f6d5;
}
.share-dropdown {
position: relative;
}
.share-options {
position: absolute;
bottom: 100%;
left: 0;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 10px;
display: none;
flex-direction: column;
gap: 8px;
min-width: 150px;
z-index: 10;
animation: fadeIn 0.2s ease-out;
}
.share-dropdown:hover .share-options {
display: flex;
}
.share-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
transition: var(--transition);
text-decoration: none;
color: var(--text-color);
}
.share-option:hover {
background-color: #f7fafc;
}
.reward-button {
position: relative;
}
.reward-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 20px;
display: none;
flex-direction: column;
gap: 15px;
width: 280px;
z-index: 10;
animation: fadeIn 0.2s ease-out;
}
.reward-button:hover .reward-popup {
display: flex;
}
.reward-title {
font-size: 1rem;
font-weight: 600;
text-align: center;
color: var(--primary-dark);
}
.reward-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.reward-option {
padding: 8px;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.reward-option:hover {
border-color: var(--primary-light);
background-color: #f0f5ff;
}
.reward-amount {
font-weight: 600;
color: var(--primary-color);
}
.reward-submit {
background-color: var(--primary-color);
color: white;
border: none;
padding: 8px;
border-radius: 6px;
cursor: pointer;
transition: var(--transition;
}
.reward-submit:hover {
background-color: var(--primary-dark);
}
@media (max-width: 768px) {
.article-header {
padding: 20px;
}
.article-title {
font-size: 1.5rem;
}
.article-content, .article-footer {
padding: 20px;
}
.action-buttons {
width: 100%;
justify-content: space-between;
}
.paywall {
margin: 20px 0;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.article-meta {
flex-direction: column;
gap: 5px;
}
.reward-options {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="article-container">
<!-- 文章头部 -->
<div class="article-header">
<h1 class="article-title">如何构建一个高性能的Web应用</h1>
<div class="article-meta">
<span><i class="fas fa-user"></i> 作者: 张技术</span>
<span><i class="fas fa-calendar-alt"></i> 发布时间: 2023-05-15</span>
<span><i class="fas fa-eye"></i> 阅读量: 2.4k</span>
</div>
</div>
<!-- 文章内容 -->
<div class="article-content">
<div class="article-text preview-content">
<p>在当今快速发展的互联网时代，构建高性能的Web应用已成为每个开发者的必修课。本文将深入探讨如何从架构设计、代码优化和资源管理等多个维度提升Web应用的性能表现。</p>
<h2>一、前端性能优化</h2>
<p>前端是用户直接接触的部分，其性能直接影响用户体验。以下是几个关键优化点：</p>
<ul>
<li>资源压缩：使用工具如Webpack对JS、CSS进行压缩</li>
<li>图片优化：采用WebP格式，实现懒加载</li>
<li>代码分割：按需加载路由组件</li>
<li>缓存策略：合理设置HTTP缓存头</li>
</ul>
<h2>二、后端性能优化</h2>
<p>后端性能决定了应用的响应速度和并发处理能力：</p>
<ul>
<li>数据库优化：建立合适的索引，避免N+1查询</li>
<li>缓存应用：使用Redis缓存热点数据</li>
<li>异步处理：将耗时操作放入队列异步执行</li>
<li>连接池：合理配置数据库连接池大小</li>
</ul>
</div>
<div class="article-text full-content">
<h2>三、架构层面的优化</h2>
<p>良好的架构设计是高性能的基础：</p>
<ul>
<li>微服务化：将应用拆分为小型服务，独立扩展</li>
<li>CDN加速：静态资源分发到边缘节点</li>
<li>负载均衡：使用Nginx实现请求分发</li>
<li>服务监控：建立完善的监控告警系统</li>
</ul>
<h2>四、实际案例分析</h2>
<p>我们以一个电商平台为例，分析其性能优化历程：</p>
<p>第一阶段：单体架构，日均PV10万，平均响应时间800ms...</p>
<p>第二阶段：引入Redis缓存商品数据，响应时间降至400ms...</p>
<p>第三阶段：实现前后端分离，静态资源CDN加速，响应时间200ms...</p>
<p>第四阶段：微服务改造，自动扩缩容，大促期间平稳应对百万级流量...</p>
<h2>五、未来趋势</h2>
<p>随着WebAssembly、Edge Computing等技术的发展，Web性能优化将迎来新的机遇...</p>
<p>总结：性能优化是一个持续的过程，需要从多个维度综合考虑，建立性能文化...</p>
</div>
<!-- 付费墙 -->
<div class="paywall">
<h3 class="paywall-title">继续阅读完整内容</h3>
<p>本文剩余内容为付费部分，支付后即可阅读全文</p>
<button class="pay-button" id="payButton">
<i class="fas fa-lock"></i> 解锁全文 (¥9.9)
</button>
<!-- 支付表单 -->
<div class="payment-form" id="paymentForm">
<h3>选择支付方式</h3>
<div class="form-group">
<label for="paymentMethod">支付方式</label>
<select id="paymentMethod">
<option value="wechat">微信支付</option>
<option value="alipay">支付宝</option>
<option value="unionpay">银联支付</option>
</select>
</div>
<div class="form-group">
<label for="cardNumber">卡号/账号</label>
<input type="text" id="cardNumber" placeholder="请输入支付账号">
</div>
<button class="submit-payment" id="submitPayment">确认支付</button>
</div>
</div>
</div>
<!-- 文章底部互动区 -->
<div class="article-footer">
<div class="action-buttons">
<button class="action-button like-button" id="likeButton">
<i class="far fa-heart"></i> <span class="like-count">256</span>
</button>
<button class="action-button bookmark-button" id="bookmarkButton">
<i class="far fa-bookmark"></i> 收藏
</button>
<div class="reward-button">
<button class="action-button">
<i class="fas fa-gift"></i> 打赏
</button>
<div class="reward-popup">
<div class="reward-title">感谢您的支持</div>
<div class="reward-options">
<div class="reward-option">
<div class="reward-amount">¥2</div>
<div>鼓励一下</div>
</div>
<div class="reward-option">
<div class="reward-amount">¥5</div>
<div>继续创作</div>
</div>
<div class="reward-option">
<div class="reward-amount">¥10</div>
<div>非常喜欢</div>
</div>
<div class="reward-option">
<div class="reward-amount">¥20</div>
<div>太棒了</div>
</div>
<div class="reward-option">
<div class="reward-amount">¥50</div>
<div>专业内容</div>
</div>
<div class="reward-option">
<div class="reward-amount">自定义</div>
<div>其他金额</div>
</div>
</div>
<button class="reward-submit">确认打赏</button>
</div>
</div>
</div>
<div class="share-dropdown">
<button class="action-button">
<i class="fas fa-share-alt"></i> 分享
</button>
<div class="share-options">
<a href="#" class="share-option">
<i class="fab fa-weixin"></i> 微信
</a>
<a href="#" class="share-option">
<i class="fab fa-weibo"></i> 微博
</a>
<a href="#" class="share-option">
<i class="fab fa-qq"></i> QQ
</a>
<a href="#" class="share-option">
<i class="fas fa-link"></i> 复制链接
</a>
</div>
</div>
</div>
</div>
<script>
// 简单的交互逻辑
document.addEventListener('DOMContentLoaded', function() {
// 支付按钮点击
const payButton = document.getElementById('payButton');
const paymentForm = document.getElementById('paymentForm');
const submitPayment = document.getElementById('submitPayment');
payButton.addEventListener('click', function() {
paymentForm.classList.toggle('show');
this.textContent = paymentForm.classList.contains('show') ?
'取消支付' : '解锁全文 (¥9.9)';
});
// 模拟支付提交
submitPayment.addEventListener('click', function() {
alert('支付成功！正在解锁全文...');
document.querySelector('.preview-content').style.maxHeight = 'none';
document.querySelector('.preview-content').classList.remove('preview-content');
document.querySelector('.full-content').style.display = 'block';
paymentForm.classList.remove('show');
payButton.style.display = 'none';
document.querySelector('.paywall-title').textContent = '已解锁全文';
document.querySelector('.paywall p').textContent = '感谢您的支持，已为您展示完整内容';
});
// 点赞功能
const likeButton = document.getElementById('likeButton');
const likeCount = document.querySelector('.like-count');
let liked = false;
let likes = 256;
likeButton.addEventListener('click', function() {
liked = !liked;
this.classList.toggle('liked');
this.querySelector('i').className = liked ? 'fas fa-heart' : 'far fa-heart';
likes = liked ? likes + 1 : likes - 1;
likeCount.textContent = likes;
});
// 收藏功能
const bookmarkButton = document.getElementById('bookmarkButton');
let bookmarked = false;
bookmarkButton.addEventListener('click', function() {
bookmarked = !bookmarked;
this.classList.toggle('bookmarked');
this.querySelector('i').className = bookmarked ? 'fas fa-bookmark' : 'far fa-bookmark';
this.querySelector('span').textContent = bookmarked ? '已收藏' : '收藏';
if (bookmarked) {
alert('文章已添加到收藏夹');
}
});
});
</script>
</body>
</html>这个代码实现了以下功能：
- 文章内容展示，前1/3内容可见，剩余部分隐藏
- 付费解锁功能，包含支付表单
- 打赏功能，提供多种金额选择
- 收藏和点赞按钮，带状态切换
- 分享功能，支持多种分享渠道
- 响应式设计，适配不同设备
- 动画效果增强用户体验
- 使用Font Awesome 6.4.0图标
页面设计遵循了您要求的配色方案(#667eea)、圆角布局和亮色主题，同时保持了简洁易读的风格。交互部分使用了少量必要的JavaScript来处理按钮状态和支付流程。
需支付 5元 阅读剩余内容
