创建一个大气活动页面，包含VIP邀请和分享功能。以下是完整的HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIP尊享活动</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局样式 */
:root {
--primary-color: #FF3300;
--primary-light: #FF6633;
--primary-dark: #CC2900;
--bg-color: #FFF9F8;
--text-color: #333;
--light-text: #666;
--card-bg: #FFFFFF;
--radius: 16px;
--shadow: 0 8px 24px rgba(255, 51, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
}
/* 容器样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部横幅 */
.hero {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
color: white;
padding: 60px 0;
text-align: center;
border-radius: 0 0 var(--radius) var(--radius);
position: relative;
overflow: hidden;
margin-bottom: 40px;
box-shadow: var(--shadow);
animation: gradientShift 8s ease infinite;
background-size: 200% 200%;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero h1 {
font-size: 2.8rem;
margin-bottom: 15px;
font-weight: 700;
position: relative;
z-index: 2;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
position: relative;
z-index: 2;
}
/* VIP特权卡片 */
.vip-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin: 50px 0;
}
.benefit-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 28px rgba(255, 51, 0, 0.15);
}
.benefit-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 20px;
display: inline-block;
transition: transform 0.3s ease;
}
.benefit-card:hover i {
transform: scale(1.1);
}
.benefit-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary-dark);
}
/* 获取VIP步骤 */
.steps-section {
margin: 60px 0;
position: relative;
}
.steps-section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--primary-color), var(--primary-light));
border-radius: 4px;
}
.step {
display: flex;
margin-bottom: 40px;
position: relative;
align-items: center;
}
.step:nth-child(odd) {
flex-direction: row;
}
.step:nth-child(even) {
flex-direction: row-reverse;
}
.step-icon {
width: 80px;
height: 80px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
flex-shrink: 0;
margin: 0 30px;
box-shadow: 0 4px 12px rgba(255, 51, 0, 0.3);
position: relative;
z-index: 2;
transition: transform 0.3s ease, background 0.3s ease;
}
.step:hover .step-icon {
transform: scale(1.1);
background: var(--primary-dark);
}
.step-content {
flex: 1;
background: var(--card-bg);
padding: 30px;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.3s ease;
}
.step:hover .step-content {
transform: translateX(10px);
}
.step:nth-child(even):hover .step-content {
transform: translateX(-10px);
}
.step h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}
/* 行动号召 */
.cta-section {
text-align: center;
margin: 80px 0;
}
.cta-button {
display: inline-block;
background: linear-gradient(to right, var(--primary-color), var(--primary-light));
color: white;
padding: 18px 45px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 4px 15px rgba(255, 51, 0, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.7s ease;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 51, 0, 0.5);
}
.cta-button:hover::before {
left: 100%;
}
/* 响应式设计 */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.steps-section::before {
left: 40px;
}
.step, .step:nth-child(even) {
flex-direction: column;
align-items: flex-start;
}
.step-icon {
margin: 0 0 20px 0;
}
.step:hover .step-content,
.step:nth-child(even):hover .step-content {
transform: translateX(0) translateY(-10px);
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate {
animation: fadeInUp 0.6s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
</style>
</head>
<body>
<!-- 头部横幅 -->
<section class="hero">
<div class="container">
<h1 class="animate">尊享VIP特权</h1>
<p class="animate delay-1">邀请好友或分享活动，即可获得专属VIP会员资格，享受尊贵特权</p>
<img src="https://page.mixinnet.cn/api/placeholder?w=600&h=300" alt="VIP尊享" style="max-width: 100%; border-radius: var(--radius); margin-top: 30px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);" class="animate delay-2">
</div>
</section>
<div class="container">
<!-- VIP特权展示 -->
<section class="vip-benefits">
<div class="benefit-card animate">
<i class="fas fa-crown"></i>
<h3>专属标识</h3>
<p>尊贵的VIP专属标识，彰显您的独特身份</p>
</div>
<div class="benefit-card animate delay-1">
<i class="fas fa-gem"></i>
<h3>高级功能</h3>
<p>解锁平台所有高级功能，享受无限制体验</p>
</div>
<div class="benefit-card animate delay-2">
<i class="fas fa-bolt"></i>
<h3>极速通道</h3>
<p>专属服务器加速，享受极速流畅体验</p>
</div>
</section>
<!-- 获取VIP步骤 -->
<section class="steps-section">
<h2 style="text-align: center; margin-bottom: 50px; color: var(--primary-color); font-size: 2rem;" class="animate">如何获得VIP</h2>
<div class="step animate">
<div class="step-icon">
i class="fas-user-plus"></i>
</div>
<div class="step-content">
<h3>邀请好友</h3>
<p>每成功邀请1位好友注册并完成验证，您将获得7天VIP体验。邀请3位好友即可升级为30天VIP会员。</p>
</div>
</div>
<div class="step animate delay-1">
<div class="step-icon">
<i class="fas fa-share-alt"></i>
</div>
<div class="step-content">
<h3>分享活动</h3>
<p>分享本活动到社交平台，每次有效分享可获得3天VIP体验，每日最多可获得15天VIP体验。</p>
</div>
</div>
<div class="step animate delay-2">
<div class="step-icon">
<i class="fas fa-gift"></i>
</div>
<div class="step-content">
<h3>领取奖励</h3>
<p>完成邀请或分享后，系统将自动发放VIP天数到您的账户，可在个人中心查看VIP有效期。</p>
</div>
</div>
</section>
<!-- 行动号召 -->
<section class="cta-section">
<a href="#" class="cta-button animate delay-3">立即参与活动</a>
</section>
</div>
<script>
// 滚动动画效果
document.addEventListener('DOMContentLoaded', function() {
const animateElements = document.querySelectorAll('.animate');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1
});
animateElements.forEach(element => {
element.style.opacity = 0;
observer.observe(element);
});
// 按钮波纹效果
const ctaButton = document.querySelector('.cta-button');
if (ctaButton) {
ctaButton.addEventListener('click', function(e) {
const x = e.clientX - e.target.getBoundingClientRect().left;
const y = e.clientY - e.target.getBoundingClientRect().top;
const ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
}
});
</script>
</body>
</html>这个页面包含以下特点：
- 响应式设计 - 适配各种屏幕尺寸
- 动画效果 - 滚动动画、悬停动画、按钮动画
- VIP特权展示 - 使用卡片式布局展示VIP特权
- 获取步骤 - 时间轴式布局展示如何获得VIP
- 行动号召 - 醒目的CTA按钮
- 配色方案 - 基于#FF3300的配色系统
- 圆角设计 - 所有元素都采用圆角设计
- 图标使用 - 使用Font Awesome 6.4.0图标
页面加载时会自动应用滚动动画效果，所有元素都有平滑的过渡效果，按钮有波纹点击反馈，整体设计现代且专业。
需支付 5元 阅读剩余内容
