HTML&CSS：2025新年日历卡片

这段代码创建了一个具有 3D 效果和动态背景的日历卡片，通过 CSS 技术实现了卡片的背景移动、3D 旋转和内容的 3D 位置变化效果，为页面添加了视觉吸引力和用户交互体验。

演示效果

HTML&CSS

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .parent {
            height: 200px;
            width: 300px;
            padding: 20px;
            perspective: 1000px;
        }

        .card {
            padding-top: 50px;
            border: 3px solid rgb(255, 255, 255);
            transform-style: preserve-3d;
            background: linear-gradient(135deg, #0000 18.75%, #f3f3f3 0 31.25%, #0000 0),
                repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #ffffff 0 18.75%);
            background-size: 60px 60px;
            background-position: 0 0, 0 0;
            background-color: #f0f0f0;
            width: 100%;
            box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;
            transition: all 0.5s ease-in-out;
        }

        .card:hover {
            background-position: -100px 100px, -100px 100px;
            transform: rotate3d(0.5, 0.5, 0, 10deg);
        }

        .content-box {
            background: rgba(4, 193, 250, 0.732);
            transition: all 0.5s ease-in-out;
            padding: 60px 25px 25px 25px;
            transform-style: preserve-3d;
        }

        .content-box .card-title {
            display: inline-block;
            color: white;
            font-size: 25px;
            font-weight: 900;
            transition: all 0.5s ease-in-out;
            transform: translate3d(0px, 0px, 50px);
        }

        .content-box .card-title .subtitle {
            display: inline-block;
            color: white;
            font-size: 16px;
            font-weight: 900;
            transition: all 0.5s ease-in-out;
            transform: translate3d(0px, 0px, 50px);
        }

        .content-box .card-title:hover {
            transform: translate3d(0px, 0px, 60px);
        }

        .content-box .card-content {
            margin-top: 10px;
            font-size: 12px;
            font-weight: 700;
            color: #f2f2f2;
            transition: all 0.5s ease-in-out;
            transform: translate3d(0px, 0px, 30px);
        }

        .content-box .card-content:hover {
            transform: translate3d(0px, 0px, 60px);
        }

        .content-box .see-more {
            cursor: pointer;
            margin-top: 1rem;
            display: inline-block;
            font-weight: 900;
            font-size: 9px;
            text-transform: uppercase;
            color: rgb(7, 185, 255);
            background: white;
            padding: 0.5rem 0.7rem;
            transition: all 0.5s ease-in-out;
            transform: translate3d(0px, 0px, 20px);
        }

        .content-box .see-more:hover {
            transform: translate3d(0px, 0px, 60px);
        }

        .date-box {
            position: absolute;
            top: 30px;
            right: 30px;
            height: 50px;
            width: 50px;
            background: white;
            border: 1px solid rgb(7, 185, 255);
            padding: 10px;
            transform: translate3d(0px, 0px, 80px);
            box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
        }

        .date-box span {
            display: block;
            text-align: center;
        }

        .date-box .month {
            color: rgb(4, 193, 250);
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .date-box .date {
            font-size: 20px;
            font-weight: 900;
            color: rgb(4, 193, 250);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="card">
            <div class="content-box">
                <span class="card-title">2025 <span class="subtitle">蛇年大吉</span></span>
                <p class="card-content">
                    祥龙降瑞留福韵，金蛇迎春展锦程
                </p>
                <span class="see-more">了解更多</span>
            </div>
            <div class="date-box">
                <span class="month">01</span>
                <span class="date">18</span>
            </div>
        </div>
    </div>
</body>

</html>

HTML 结构

parent: 创建一个类名为"parent"的 div 元素，用于包含卡片。
card: 创建一个类名为"card"的 div 元素，用于显示卡片内容。
content-box: 包含卡片的主要内容。
card-title: 显示卡片的标题和副标题。
card-content: 显示卡片的内容。
see-more: 显示"了解更多"按钮。
date-box: 包含日期信息。
month: 显示月份。
date: 显示日期。

CSS 样式

.parent: 设置卡片容器的样式，包括尺寸、内边距和 3D 透视效果。
.card: 设置卡片的样式，包括内边距、边框、背景渐变、尺寸和阴影。
.card:hover: 设置鼠标悬停在卡片上时的背景位置和 3D 旋转效果。
.content-box: 设置卡片内容的样式，包括背景、过渡效果和内边距。
.content-box .card-title: 设置卡片标题的样式，包括颜色、字体大小、权重和 3D 位置。
.content-box .card-title .subtitle: 设置副标题的样式，包括颜色、字体大小、权重和 3D 位置。
.content-box .card-title:hover: 设置鼠标悬停在标题上时的 3D 位置。
.content-box .card-content: 设置卡片内容的样式，包括字体大小、权重、颜色和 3D 位置。
.content-box .card-content:hover: 设置鼠标悬停在内容上时的 3D 位置。
.content-box .see-more: 设置"了解更多"按钮的样式，包括光标、内边距、字体大小、颜色和 3D 位置。
.content-box .see-more:hover: 设置鼠标悬停在按钮上时的 3D 位置。
.date-box: 设置日期框的样式，包括位置、尺寸、背景、边框、内边距、3D 位置和阴影。
.date-box span: 设置日期框内文本的样式，包括显示方式和对齐。
.date-box .month: 设置月份的样式，包括颜色、字体大小和权重。
.date-box .date: 设置日期的样式，包括字体大小和权重。