炫酷的动态日期卡片：实现撕页效果与渐变动画的日历

最新推荐文章于 2025-06-05 20:08:17 发布

饼干饿死了

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量637

点赞数 22

分类专栏：整活前端文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/weixin_45408984/article/details/145715963

版权

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

整活

5 篇文章

订阅专栏

在今天的博客中，我们将一同探讨如何实现一个动态日期更新的日历卡片，配合撕页效果和渐变背景动画。这个小项目结合了CSS的动画特性、JavaScript的日期操作和一些有趣的交互效果，给用户带来炫酷的视觉体验。让我们一起来看看如何一步步完成这个项目吧！

完整源码获取👇

在这里插入图片描述

项目效果展示

本项目的核心效果是一个带有动态日期更新的日历卡片。在用户点击卡片时，会触发一个“撕页”效果，同时日期会更新为下一天，并伴随一个平滑的动画效果。除此之外，背景还有渐变动画，卡片本身也有轻微的交互效果，让整个页面更加生动。

精美日历卡片

主要功能：

动态日期显示：页面会根据当前日期自动更新，用户点击卡片后，日期会转到下一天。
撕页动画：点击卡片时，页面模拟撕开的效果，增强用户的交互体验。
光效与渐变背景：背景通过渐变动画不断变化，卡片表面还带有微光效果，提升页面的视觉效果。
移动端适配：页面设计也考虑了不同屏幕尺寸，确保在小屏设备上也能良好显示。

项目代码解析

1. HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>整合版日历卡片</title>
    <style>
        /* 相关样式见下文 */
    </style>
</head>
<body>
    <div class="particles"></div>
    <div class="calendar-card">
        <div class="page-rip"></div>
        <div class="date-container">
            <div class="day-month">
                <div class="day" id="day"></div>
                <div class="month-year">
                    <div class="month" id="month"></div>
                    <div class="year" id="year"></div>
                </div>
            </div>
            <div class="weekday" id="weekday"></div>
        </div>
    </div>

    <script>
        // 动态日期更新与动画实现代码
    </script>
</body>
</html>

主要结构：页面包括一个包含日期和撕页效果的calendar-card容器，和一个粒子背景particles，以及一个用于承载日期的date-container。
日期显示：通过id="day", id="month", id="year", id="weekday"这几个元素来显示当前的日期、月份、年份和星期几。

2. CSS 样式解析

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #f5f7ff, #e9e4ff, #f5f7ff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

这段代码为背景设置了一个渐变动画，使背景色在15秒内平滑地进行变化，增加了动态效果。

卡片样式：

.calendar-card {
    position: relative;
    width: 320px;
    padding: 40px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25), 0 5px 15px rgba(118, 75, 162, 0.2);
}

卡片的背景使用了渐变色，并且通过box-shadow设置了阴影效果，让卡片看起来更有层次感。transition让卡片在鼠标悬停时实现平滑的放大效果。

撕页效果动画：

.page-rip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    transform-origin: left bottom;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}
.rip-animation {
    animation: pageRip 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

撕页效果通过.page-rip和.rip-animation实现。通过@keyframes pageRip动画，使得页面从完全显示到消失，模仿翻页的效果。

3. JavaScript 功能实现

const updateDate = () => {
    const date = new Date();
    document.getElementById('day').textContent = date.getDate();
    document.getElementById('month').textContent = date.toLocaleDateString('zh-CN', { month: 'long' });
    document.getElementById('year').textContent = date.getFullYear();
    document.getElementById('weekday').textContent = date.toLocaleDateString('zh-CN', { weekday: 'long' });
}

updateDate函数负责动态更新日期。当页面加载时，调用该函数显示当前日期。如果需要更新日期，可以通过点击卡片来触发日期的变化。

撕页动画和日期更新：

function playRipAnimation() {
    if(isAnimating) return;
    isAnimating = true;

    const rip = document.querySelector('.page-rip');
    const container = document.querySelector('.date-container');

    rip.classList.add('rip-animation');

    setTimeout(() => {
        container.classList.add('date-update');
        currentDate = nextDate();
        updateDisplay(currentDate);
    }, 300);

    setTimeout(() => {
        rip.classList.remove('rip-animation');
        container.classList.remove('date-update');
        isAnimating = false;
    }, 800);
}