情侣空间网页版,香港vps20元,怎么用vps,vps主机优势,vps免費試用

🗣 Wd提问: 情侣空间网页版

🤖 Ai回答:
我来为你设计一个温馨浪漫的情侣空间网页版。这个设计将包含纪念日倒计时、相册、日记、时间轴等核心功能，采用粉色调营造甜蜜氛围。

html
<!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 href=https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css rel=stylesheet
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
<style
:root {
primary-pink: ff6b9d;
light-pink: ffc0cb;
dark-pink: e91e63;
bg-gradient: linear-gradient(135deg, ffecd2 0%, fcb69f 100%);
}

body {
background: var(bg-gradient);
min-height: 100vh;
font-family: 'Microsoft YaHei', sans-serif;
}

.glass-effect {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
border: 1px solid rgba(255, 255, 255, 0.18);
}

.heart-animation {
animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.float-animation {
animation: float 3s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.timeline-item::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: var(primary-pink);
border-radius: 50%;
top: 20px;
}

.timeline-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: var(light-pink);
top: 40px;
}

.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}

.photo-item {
aspect-ratio: 1;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s;
}

.photo-item:hover {
transform: scale(1.05);
}

.mood-selector {
display: flex;
gap: 10px;
justify-content: center;
margin: 10px 0;
}

.mood-btn {
font-size: 24px;
padding: 10px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
background: white;
}

.mood-btn:hover {
transform: scale(1.2);
background: var(light-pink);
}

.mood-btn.active {
background: var(primary-pink);
color: white;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
animation: fadeIn 0.5s;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.love-counter {
font-size: 3rem;
font-weight: bold;
background: linear-gradient(45deg, var(primary-pink), var(dark-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.diary-entry {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

.diary-entry:hover {
transform: translateY(-5px);
}

.task-card {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 15px;
border-left: 5px solid var(primary-pink);
transition: all 0.3s;
}

.task-card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.task-card.completed {
opacity: 0.7;
border-left-color: 4caf50;
}
</style
</head
<body
<! 导航栏
<nav class=glass-effect m-4 p-4
<div class=container mx-auto flex justify-between items-center
<div class=flex items-center space-x-2
<i class=fas fa-heart text-3xl text-pink-500 heart-animation</i
<h1 class=text-2xl font-bold text-gray-800我们的情侣空间</h1
</div
<div class=flex items-center space-x-4
<span class=text-gray-600💕 小明 & 小红</span
<button class=bg-pink-500 text-white px-4 py-2 rounded-full hover:bg-pink-600 transition
<i class=fas fa-cog</i
</button
</div
</div
</nav

<! 主要内容区
<div class=container mx-auto px-4 pb-8
<! 纪念日倒计时
<div class=glass-effect p-8 mb-6 text-center
<h2 class=text-3xl font-bold mb-4 text-gray-800
<i class=fas fa-calendar-heart text-pink-500</i 我们在一起
</h2
<div class=love-counter mb-4 id=loveDays520</div
<p class=text-xl text-gray-600天啦 💕</p
<div class=mt-6 grid grid-cols-4 gap-4 max-w-2xl mx-auto
<div class=bg-white rounded-lg p-4
<div class=text-2xl font-bold text-pink-500 id=years1</div
<div class=text-sm text-gray-600年</div
</div
<div class=bg-white rounded-lg p-4
<div class=text-2xl font-bold text-pink-500 id=months5</div
<div class=text-sm text-gray-600月</div
</div
<div class=bg-white rounded-lg p-4
<div class=text-2xl font-bold text-pink-500 id=days20</div
<div class=text-sm text-gray-600天</div
</div
<div class=bg-white rounded-lg p-4
<div class=text-2xl font-bold text-pink-500 id=hours12</div
<div class=text-sm text-gray-600时</div
</div
</div
</div

<! 标签页导航
<div class=glass-effect p-4 mb-6
<div class=flex flex-wrap justify-center gap-4
<button class=tab-btn px-6 py-3 rounded-full bg-pink-500 text-white font-semibold transition hover:bg-pink-600 data-tab=timeline
<i class=fas fa-clock</i 爱的历程
</button
<button class=tab-btn px-6 py-3 rounded-full bg-white text-gray-700 font-semibold transition hover:bg-pink-100 data-tab=photos
<i class=fas fa-images</i 相册
</button
<button class=tab-btn px-6 py-3 rounded-full bg-white text-gray-700 font-semibold transition hover:bg-pink-100 data-tab=diary
<i class=fas fa-book</i 日记
</button
<button class=tab-btn px-6 py-3 rounded-full bg-white text-gray-700 font-semibold transition hover:bg-pink-100 data-tab=mood
<i class=fas fa-smile</i 心情
</button
<button class=tab-btn px-6 py-3 rounded-full bg-white text-gray-700 font-semibold

Ai作答

📣 商家广告：