当前位置：首页 > article >正文

实现动态翻转时钟效果的 HTML、CSS 和 JavaScript，附源码

article 2025/2/23 3:58:31

实现动态翻转时钟效果的 HTML、CSS 和 JavaScript

在现代网页设计中，动画效果可以极大地增强用户体验。本文将介绍如何利用 HTML、CSS 和 JavaScript 创建一个动态翻转时钟的效果，模拟经典机械翻页时钟的视觉效果。我们将通过详细的步骤讲解如何实现时钟数字的翻转动画、3D 视觉效果、模糊效果等，打造一个具有高度还原度的翻转时钟。

机械时钟

源码获取👇

在这里插入图片描述

功能概述

该页面实现了一个动态的翻转时钟效果。通过 flip-card 元素，数字会在每次时间变化时进行翻转。每次数字变化时，都会触发一个翻转动画，并带有模糊和阴影效果，模拟了机械时钟翻页的过程。

主要功能：

时钟显示：页面每秒钟自动更新当前的时、分、秒，并通过翻转效果展示时间的变化。
翻转动画：每当时间的某一位数字发生变化时，当前数字会先进行旋转，并伴随模糊效果，直到翻转完成后更新为新数字。
3D 视觉效果：每个数字卡片应用了透视效果和阴影，增强了 3D 视觉感，使翻转动画更加真实。
平滑过渡：数字更新时通过适当的延迟控制，使得数字翻转的过程更加流畅自然，避免了突兀的变化。

代码解析

1. HTML 结构

页面的 HTML 结构主要由多个 flip-card 元素组成，每个 flip-card 包含上下两部分：top 和 bottom，分别用于展示数字的上下翻转部分。时钟的每一位数字（时、分、秒）都通过这种结构进行显示。

<div class="flip-card">
    <div class="top" id="h1-top"></div>
    <div class="bottom" id="h1-bottom"></div>
</div>

每个 flip-card 的容器都有一个独立的 top 和 bottom 部分，负责展示数字翻转的上下两部分。每当数字更新时，会通过 JavaScript 动态更新这些部分的内容。

2. CSS 样式

CSS 部分为翻转时钟提供了视觉效果。通过 perspective 和 transform-style 属性，为翻转动画提供了 3D 透视效果。此外，使用 @keyframes 来定义翻转动画，其中包括模糊效果和旋转的过渡。

.flip-card {
    perspective: 1000px; /* 设置更强的透视效果 */
}

.flip-card .flip {
    animation: flipDown 0.7s ease-in-out; /* 翻转动画 */
}

@keyframes flipDown {
    0% {
        transform: rotateX(0deg); /* 初始状态 */
        filter: blur(0px); /* 无模糊效果 */
    }
    50% {
        transform: rotateX(90deg); /* 翻转到中间 */
        filter: blur(10px); /* 添加模糊效果 */
    }
    100% {
        transform: rotateX(180deg); /* 完成翻转 */
        filter: blur(0px); /* 移除模糊效果 */
    }
}

perspective: 1000px：为整个翻转效果设置透视深度，使得数字的翻转看起来更加立体。
@keyframes flipDown：定义了从 0 到 180 度的翻转过程，翻转过程中加入了模糊效果，模拟翻转的动态过程。

3. JavaScript 动态更新

JavaScript 负责定时更新时钟数字，并触发数字翻转的动画。每秒钟，updateClock 函数会更新时、分、秒的值，并通过 updateDigit 函数触发每个数字的翻转动画。为了平滑过渡，我们为每个数字设置了不同的延迟。

function updateDigit(id, newValue, delay = 0) {
    let topEl = document.getElementById(`${id}-top`);
    let bottomEl = document.getElementById(`${id}-bottom`);

    if (topEl.innerText !== newValue) {
        let flipEl = document.createElement("div");
        flipEl.classList.add("flip");
        flipEl.innerText = topEl.innerText;

        setTimeout(() => {
            flipEl.addEventListener('animationend', () => {
                topEl.innerText = newValue;
                bottomEl.innerText = newValue;
                flipEl.remove();
            });

            topEl.appendChild(flipEl);
        }, delay);
    }
}

updateDigit：负责根据时间更新每个数字的显示，并执行翻转动画。通过 setTimeout 控制动画的延迟，确保每个数字的翻转过程不冲突。
setInterval(updateClock, 1000)：每秒钟调用一次 updateClock 函数，更新时钟显示。

视觉效果与用户体验

3D 翻转效果：通过 CSS 的 perspective 和 transform 属性，使得数字的翻转过程看起来非常立体，类似真实的机械时钟翻页效果。
模糊过渡：在数字翻转的过程中，我们使用了 blur 过滤器来模拟物理翻转时的视觉模糊，增强了翻转动画的真实感。
阴影和光影效果：为了增强 3D 效果，每个数字卡片都加上了阴影，给用户带来更强的视觉层次感。