HTML与CSS打造的3D数字时钟

在网页开发的世界里，HTML 和 CSS 是构建网页基础与样式的强大工具。今天，我们要深入剖析一个由 HTML 和 CSS 实现的极具创意的项目，它包含了 3D 数字和方块动画效果，为网页增添了独特的视觉魅力。

代码演示

点击即可转跳至在线预览~

项目概述

这个项目主要由一个包含多个数字容器和一个表面容器组成，表面容器内有众多方块元素。通过精心设计的 CSS 样式和动画，实现了 3D 效果和动态展示。整体项目的代码包含在 runoob - test.html 文件中，它充分展示了 HTML 和 CSS 在创建复杂视觉效果方面的能力。

HTML 结构分析

数字容器

<div class="container">
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>
    <div class="digit"></div>

container 类的 div 元素是整个项目的容器，它采用绝对定位并居中显示。内部的多个 digit 类的 div 元素可能用于后续展示数字效果，不过目前代码中未对其进行详细的样式和内容设置。

表面容器与方块元素

<div class="surface">
    <!-- 众多的方块元素，如 b1 - b94 -->
    <div class="block b1">
        <div class="block-outer">
            <div class="block-inner">
                <div class="bottom"></div>
                <div class="front"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </div>
    </div>
    <!-- 其他方块元素... -->
</div>

surface 类的 div 元素用于承载众多的方块元素。每个方块元素由 block 类的 div 包裹，内部又分为 block-outer 和 block-inner 两层。block-inner 包含了 bottom、front、left 和 right 四个面，用于构建 3D 方块的外观。

CSS 样式与动画效果

全局样式

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: radial-gradient(circle at center, transparent, #000 95%), linear-gradient(#444 2px, transparent 0) 0 0/20px 20px, linear-gradient(90deg, #444 2px, #000 0) 0 0/20px 20px;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

全局样式设置了所有元素的盒模型为 border-box，并为 body 元素设置了独特的背景，包括径向渐变和线性渐变，营造出一种网格状的黑暗背景效果。同时，将 body 的高度设置为视口高度，并隐藏溢出部分。

3D 效果与容器样式

.container, .surface, .block, .block-outer, .block-inner {
    transform-style: preserve-3d;
}

.container {
    animation: bounce 2s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite;
    display: flex;
    margin: auto;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 594px;
    height: 200px;
    perspective: 800px;
}

通过 transform-style: preserve-3d 属性，确保容器和内部元素能够正确呈现 3D 效果。container 元素使用了 bounce 动画，实现了上下弹跳的效果。同时，通过 perspective 属性设置了透视效果，增强了 3D 视觉感受。

表面容器样式

.surface {
    animation: tilt 2s -1.5s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite;
    display: block;
    width: 540px;
    height: 20px;
    margin: auto;
    transform: translateY(50px) rotateX(105deg) rotateZ(0deg);
    will-change: transform;
}

surface 元素使用了 tilt 动画，使其产生倾斜的动态效果。通过 transform 属性对其进行位置和角度的调整，让表面呈现出特定的 3D 姿态。

方块样式

.block-inner div {
    background-color: #74d447;
}
.block-inner > div {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: absolute;
    width: 20px;
    height: 20px;
}

方块的内部元素使用绿色背景色，通过 position: absolute 进行绝对定位，并使用 flexbox 布局进行内部元素的排列。

动画效果

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
}

@keyframes tilt {
    0%, 100% {
        transform: translateY(50px) rotateX(105deg) rotateZ(0deg);
    }
    50% {
        transform: translateY(50px) rotateX(105deg) rotateZ(10deg);
    }
}

bounce 动画使 container 元素在垂直方向上上下弹跳，tilt 动画使 surface 元素在一定角度内倾斜，为整个项目增添了生动的动态效果。