<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鸟羽鈴粉丝
愿望查看器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f9f7fe 0%, #e6f0fa 100%);
min-height: 100vh;
padding: 20px;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(100, 70, 200, 0.15);
overflow: hidden;
padding: 30px;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px 0;
}
h1 {
color: #7e57c2;
font-size: 2.5rem;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
h1::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #ff9dbf, #87cefa);
border-radius: 2px;
}
.logo {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffb6c1, #87cefa);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.logo::before {
content: "🐦";
font-size: 28px;
color: white;
}
.subtitle {
color: #6c757d;
font-size: 1.1rem;
max-width: 500px;
margin: 0 auto 20px;
line-height: 1.6;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
}
.nav-btn {
background: linear-gradient(45deg, #ff6b9d, #a855f7);
color: white;
border: none;
padding: 12px 25px;
font-size: 1rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
min-width: 120px;
justify-content: center;
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.nav-btn:disabled {
background: linear-gradient(45deg, #bdc3c7, #95a5a6);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.counter {
font-size: 1.3rem;
color: #555;
font-weight: 500;
background: white;
padding: 8px 20px;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: center;
}
.card-container {
perspective: 1200px;
margin: 30px 0;
min-height: 400px;
}
.card {
position: relative;
width: 100%;
height: 400px;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 20px;
background: white;
box-shadow: 0 15px 35px rgba(50,50,93,0.1), 0 5px 15px rgba(0,0,0,0.07);
overflow: hidden;
cursor: pointer;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
padding: 30px;
overflow: hidden;
}
.card-front {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
justify-content: center;
align-items: center;
text-align: center;
}
.card-back {
background: white;
transform: rotateY(180deg);
overflow-y: auto;
}
.bird-icon {
font-size: 5rem;
margin-bottom: 25px;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.flip-text {
font-size: 1.2rem;
font-weight: 300;
margin-top: 20px;
background: rgba(255, 255, 255, 0.15);
padding: 8px 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.nickname {
font-size: 2rem;
color: #7e57c2;
text-align: center;
margin-bottom: 30px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.nickname::before {
content: "👤";
font-size: 1.8rem;
}
.wish-container {
background: #f9f5ff;
padding: 30px;
border-radius: 20px;
box-shadow: inset 0 0 15px rgba(0,0,0,0.05);
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.wish-container::before {
content: """;
position: absolute;
top: -40px;
left: -20px;
font-size: 8rem;
color: rgba(126, 87, 194, 0.1);
font-family: serif;
font-weight: bold;
z-index: 0;
}
.wish-text {
font-size: 1.4rem;
line-height: 1.7;
color: #444;
font-style: italic;
text-align: center;
position: relative;
z-index: 2;
padding: 20px;
}
.footer {
text-align: center;
margin-top: 30px;
color: #777;
font-size: 0.95rem;
padding: 20px;
}
@media (max-width: 768px) {
.card {
height: 450px;
}
.card-container {
min-height: 450px;
}
h1 {
font-size: 2rem;
}
.card-face {
padding: 20px;
}
.wish-text {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.card {
height: 500px;
}
.card-container {
min-height: 500px;
}
h1 {
font-size: 1.8rem;
}
.subtitle {
font-size: 1rem;
}
.counter {
font-size: 1.1rem;
}
.nickname {
font-size: 1.6rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo"></div>
<h1>小鸟羽鈴粉丝
愿望</h1>
<p class="subtitle">浏览粉丝们如果小鸟羽鈴来到现实世界会和她一起做什么的
美好愿望</p>
<div class="controls">
<button id="prevBtn" class="nav-btn">
<span>←</span> 上一个
</button>
<div class="counter">
<span id="current">1</span> / <span id="total">2</span>
</div>
<button id="nextBtn" class="nav-btn">
下一个 <span>→</span>
</button>
</div>
</header>
<div class="card-container">
<div class="card" id="card">
<div class="card-face card-front">
<div class="bird-icon">🐦</div>
<h2>小鸟羽鈴粉丝档案</h2>
<p class="flip-text">点击卡片查看
愿望</p>
</div>
<div class="card-face card-back">
<div class="nickname">
<span id="nickname">杨凤小号</span>
</div>
<div class="wish-container">
<div class="wish-text" id="wish">
一起打游戏，喊她妈妈。女朋友这个应该也可以吧！
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>为小鸟羽鈴粉丝特别制作 | 数据整理自B站问卷调查</p>
</div>
</div>
<script>
// 用户数据（仅保留昵称和
愿望）
const userData = [
{
bilibiliNickname: "杨凤小号",
wish: "一起打游戏，喊她妈妈。女朋友这个应该也可以吧！"
},
{
bilibiliNickname: "唐ksk",
wish: "那当然是狠狠地疼爱妹妹然后让她无可救药的爱上我口牙"
}
];
// 当前显示的索引
let currentIndex = 0;
const totalUsers = userData.length;
// DOM元素
const card = document.getElementById('card');
const nicknameEl = document.getElementById('nickname');
const wishEl = document.getElementById('wish');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const currentSpan = document.getElementById('current');
const totalSpan = document.getElementById('total');
// 初始化
totalSpan.textContent = totalUsers;
updateCounter();
renderUserData();
// 卡片点击事件 - 翻转卡片
card.addEventListener('click', () => {
if (card.style.transform === 'rotateY(180deg)') {
card.style.transform = 'rotateY(0deg)';
} else {
card.style.transform = 'rotateY(180deg)';
}
});
// 导航按钮事件
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
updateCounter();
renderUserData();
card.style.transform = 'rotateY(0deg)';
}
});
nextBtn.addEventListener('click', () => {
if (currentIndex < totalUsers - 1) {
currentIndex++;
updateCounter();
renderUserData();
card.style.transform = 'rotateY(0deg)';
}
});
// 更新计数器
function updateCounter() {
currentSpan.textContent = currentIndex + 1;
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === totalUsers - 1;
}
// 渲染用户数据
function renderUserData() {
const user = userData[currentIndex];
nicknameEl.textContent = user.bilibiliNickname;
wishEl.textContent = user.wish;
}
</script>
</body>
</html>
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
