<!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: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
text-align: center;
}
.header {
margin-bottom: 40px;
}
.header h1 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 15px;
text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.header p {
color: #a0aec0;
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.carousel {
perspective: 1000px;
height: 500px;
position: relative;
overflow: hidden;
}
.carousel-container {
height: 100%;
position: relative;
}
.card {
width: 350px;
height: 450px;
background: rgba(255, 255, 255, 0.08);
border-radius: 24px;
overflow: hidden;
position: absolute;
top: 0;
left: calc(50% - 175px);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
opacity: 0.6;
filter: blur(5px);
display: flex;
flex-direction: column;
}
.card--current {
transform: translateZ(0);
opacity: 1;
filter: blur(0);
z-index: 10;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}
.card-prev {
transform: translateX(-50%) translateZ(-100px) rotateY(10deg);
z-index: 5;
}
.card-next {
transform: translateX(50%) translateZ(-100px) rotateY(-10deg);
z-index: 5;
}
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.7);
z-index: -1;
}
.card-content {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
color: white;
}
.days-count {
text-align: left;
margin-bottom: 30px;
}
.days-count .title {
font-size: 18px;
opacity: 0.8;
margin-bottom: 5px;
}
.days-count .number {
font-size: 56px;
font-weight: bold;
line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.days-count .unit {
font-size: 24px;
margin-left: 8px;
font-weight: normal;
}
.start-date {
text-align: left;
font-size: 16px;
opacity: 0.8;
margin-bottom: 30px;
}
.calendar-container {
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
padding: 15px;
margin-top: auto;
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.1);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-size: 16px;
text-align: left;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 10px;
font-size: 14px;
}
.calendar-weekdays .weekend {
color: #ff6b6b;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.day {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.day:hover:not(.other-month):not(.today) {
background: rgba(255, 255, 255, 0.1);
}
.today {
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.other-month {
opacity: 0.4;
}
.weekend {
color: #ff6b6b;
}
.carousel-controls {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 15px;
}
.control-btn {
background: rgba(255, 255, 255, 0.1);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.dots-container {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #4facfe;
transform: scale(1.2);
}
.info-box {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
margin-top: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.info-box h3 {
color: #4facfe;
margin-bottom: 10px;
font-size: 1.2rem;
}
.info-box p {
color: #a0aec0;
line-height: 1.6;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>我的时光卡片</h1>
<p>在日期里面的日期是更新时间，做的不怎么好</p>
</div>
<div class="carousel">
<div class="carousel-container">
<div class="card card-prev" style="--bg-image: url(https://images.unsplash.com/photo-1513151233558-d860539a827b?q=80&w=1470&auto=format&fit=crop)">
<div class="card-bg" style="background-image: var(--bg-image)"></div>
<div class="card-content">
<div class="days-count">
<div class="title">你在世界已经</div>
<p class="number">8800<span class="unit">天</span></p>
</div>
<div class="start-date">2001-02-14</div>
<div class="calendar-container">
<div class="calendar-header">
<div class="current-month">2025年2月</div>
</div>
<div class="calendar-weekdays">
<span class="weekend">日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span class="weekend">六</span>
</div>
<div class="calendar-days" id="calendar2"></div>
</div>
</div>
</div>
<div class="card card--current" style="--bg-image: url(https://images.unsplash.com/photo-1503551723145-6c040742065d?q=80&w=1470&auto=format&fit=crop)">
<div class="card-bg" style="background-image: var(--bg-image)"></div>
<div class="card-content">
<div class="days-count">
<div class="title">你在世界已经过去了</div>
<p class="number">211200<span class="unit">小时</span></p>
</div>
<div class="start-date">2001-02-14</div>
<div class="calendar-container">
<div class="calendar-header">
<div class="current-month">2025年2月</div>
</div>
<div class="calendar-weekdays">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span class="weekend">六</span>
<span class="weekend">日</span>
</div>
<div class="calendar-days" id="calendar1"></div>
</div>
</div>
</div>
<div class="card card-next" style="--bg-image: url(https://images.unsplash.com/photo-1436891620584-47fac18d6d55?q=80&w=1528&auto=format&fit=crop)">
<div class="card-bg" style="background-image: var(--bg-image)"></div>
<div class="card-content">
<div class="days-count">
<div class="title">你在世界已经过去了</div>
<p class="number">91<span class="unit">个4季</span></p>
</div>
<div class="start-date">2001-02-14</div>
<div class="calendar-container">
<div class="calendar-header">
<div class="current-month">2025年2月</div>
</div>
<div class="calendar-weekdays">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span class="weekend">六</span>
<span class="weekend">日</span>
</div>
<div class="calendar-days" id="calendar3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-controls">
<button class="control-btn" id="prev-btn">←</button>
<button class="control-btn" id="next-btn">→</button>
</div>
<div class="dots-container">
<div class="dot" data-index="0"></div>
<div class="dot active" data-index="1"></div>
<div class="dot" data-index="2"></div>
</div>
<div class="info-box">
<h3>更新优化说明</h3>
<p>此设计采用了卡片轮播效果，当前卡片清晰显示并居中，其他卡片通过虚化（blur）和透明度降低来突出当前焦点。</p>
<p>关键优化点：</p>
<ul>
<li>非当前卡片添加了filter: blur(5px)虚化效果</li>
<li>非当前卡片透明度降低为0.6</li>
<li>添加了3D旋转效果增强视觉层次</li>
<li>增加指示器点提升用户体验</li>
<li>卡片内容使用半透明玻璃态效果</li>
<li>当前版本：0.6 Beta</li>
</ul>
</div>
</div>
<script>
// 生成日历函数
function generateCalendar(year, month, containerId) {
const container = document.getElementById(containerId);
container.innerHTML = '';
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const daysInMonth = lastDay.getDate();
const startDayOfWeek = (firstDay.getDay() + 6) % 7; // 0-6, where 0 is Monday
const today = new Date();
// 添加上个月的日期
for (let i = 0; i < startDayOfWeek; i++) {
const dayElem = document.createElement('div');
dayElem.className = 'day other-month';
dayElem.textContent = new Date(year, month, -startDayOfWeek + i + 1).getDate();
container.appendChild(dayElem);
}
// 添加本月的日期
for (let day = 1; day <= daysInMonth; day++) {
const dayElem = document.createElement('div');
dayElem.className = 'day';
// 检查是否是周末 (周六或周日)
const dayOfWeek = new Date(year, month, day).getDay();
if (dayOfWeek === 0 || dayOfWeek === 6) {
dayElem.classList.add('weekend');
}
// 检查是否是今天
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {
dayElem.classList.add('today');
}
dayElem.textContent = day;
container.appendChild(dayElem);
}
// 添加下个月的日期 (直到填满6行)
const totalCells = 42; // 6 rows * 7 days
const remainingCells = totalCells - (startDayOfWeek + daysInMonth);
for (let i = 1; i <= remainingCells; i++) {
const dayElem = document.createElement('div');
dayElem.className = 'day other-month';
dayElem.textContent = i;
container.appendChild(dayElem);
}
}
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
// 初始化三个日历
generateCalendar(2024, 3, 'calendar1'); // 2024年4月
generateCalendar(2023, 10, 'calendar2'); // 2023年11月
generateCalendar(2024, 4, 'calendar3'); // 2024年5月
// 轮播图控制
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const dots = document.querySelectorAll('.dot');
const cards = document.querySelectorAll('.card');
let currentIndex = 1;
function updateCarousel() {
cards.forEach((card, index) => {
card.classList.remove('card--current', 'card-prev', 'card-next');
if (index === currentIndex) {
card.classList.add('card--current');
} else if (index === (currentIndex - 1 + cards.length) % cards.length) {
card.classList.add('card-prev');
} else if (index === (currentIndex + 1) % cards.length) {
card.classList.add('card-next');
}
});
// 更新指示点状态
dots.forEach((dot, index) => {
if (index === currentIndex) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
prevBtn.addEventListener('click', function() {
currentIndex = (currentIndex - 1 + cards.length) % cards.length;
updateCarousel();
});
nextBtn.addEventListener('click', function() {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
});
// 指示点点击事件
dots.forEach(dot => {
dot.addEventListener('click', function() {
currentIndex = parseInt(this.dataset.index);
updateCarousel();
});
});
// 自动轮播
let autoPlay = setInterval(() => {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
}, 5000);
// 当鼠标悬停在轮播图上时暂停自动播放
const carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseenter', () => {
clearInterval(autoPlay);
});
carousel.addEventListener('mouseleave', () => {
autoPlay = setInterval(() => {
currentIndex = (currentIndex + 1) % cards.length;
updateCarousel();
}, 5000);
});
// 为卡片添加鼠标移动时的3D效果
const cardsContainer = document.querySelector('.carousel-container');
cardsContainer.addEventListener('mousemove', function(e) {
const currentCard = document.querySelector('.card--current');
const rect = currentCard.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const mouseX = e.clientX - centerX;
const mouseY = e.clientY - centerY;
const rotateY = mouseX / 50;
const rotateX = -mouseY / 50;
const shadowX = mouseX / 20;
const shadowY = mouseY / 20;
currentCard.style.transform = `translateZ(0) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
currentCard.style.boxShadow = `${shadowX}px ${shadowY}px 40px rgba(0, 0, 0, 0.3)`;
});
cardsContainer.addEventListener('mouseleave', function() {
const currentCard = document.querySelector('.card--current');
currentCard.style.transform = '';
currentCard.style.boxShadow = '0 25px 80px rgba(0, 0, 0, 0.5)';
});
});
</script>
</body>
</html>
index.html
style.css
index.js