HTML&CSS：卡片时钟数字动画，赶快体验一下吧！

前端Hardy
306 阅读3分钟

这个 HTML 和 CSS 代码创建了一个卡片时钟的数字显示效果，使用了一个简单的数字动画来显示当前的时、分、秒。

2.gif

一键复制

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端Hardy</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.5);
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 50px;
            border: 1px solid #fff;
            padding: 20px;
            border-radius: 10px;
        }

        .number {
            position: relative;
            height: 290px;
            width: 170px;
            margin: 20px;
        }

        .piece {
            background-color: #fff;
            border: 2px solid transparent;
            border-right-color: #aaa;
            border-bottom-color: #aaa;
            position: absolute;
            height: 50px;
            width: 50px;
            transform: scale(0);
        }

        .piece.show {
            transform: scale(1);
            transition: transform 0.2s linear;
        }

        .piece:nth-of-type(1) {
            top: 0;
            left: 0;
        }

        .piece:nth-of-type(2) {
            top: 0;
            left: 60px;
        }

        .piece:nth-of-type(3) {
            top: 0;
            left: 120px;
        }

        .piece:nth-of-type(4) {
            top: 60px;
            left: 0;
        }

        .piece:nth-of-type(5) {
            top: 60px;
            left: 120px;
        }

        .piece:nth-of-type(6) {
            top: 120px;
            left: 0;
        }

        .piece:nth-of-type(7) {
            top: 120px;
            left: 60px;
        }

        .piece:nth-of-type(8) {
            top: 120px;
            left: 120px;
        }

        .piece:nth-of-type(9) {
            top: 180px;
            left: 0px;
        }

        .piece:nth-of-type(10) {
            top: 180px;
            left: 120px;
        }

        .piece:nth-of-type(11) {
            top: 240px;
            left: 0px;
        }

        .piece:nth-of-type(12) {
            top: 240px;
            left: 60px;
        }

        .piece:nth-of-type(13) {
            top: 240px;
            left: 120px;
        }

        @media screen and (max-width: 800px) {
            .container {
                transform: scale(0.4);
            }
        }

        @media screen and (max-width: 550px) {
            .container {
                transform: scale(0.2);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="hours" class="flex">
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
        </div>

        <div id="minutes" class="flex">
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
        </div>

        <div id="seconds" class="flex">
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
            <div class="number">
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
                <div class="piece"></div>
            </div>
        </div>
    </div>
    <script>
        const hoursEls = document.querySelectorAll('#hours .number');
        const minutesEls = document.querySelectorAll('#minutes .number');
        const secondsEls = document.querySelectorAll('#seconds .number');

        const states = [
            [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13],
            [3, 5, 8, 10, 13],
            [1, 2, 3, 5, 6, 7, 8, 9, 11, 12, 13],
            [1, 2, 3, 5, 6, 7, 8, 10, 11, 12, 13],
            [1, 3, 4, 5, 6, 7, 8, 10, 13],
            [1, 2, 3, 4, 6, 7, 8, 10, 11, 12, 13],
            [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13],
            [1, 2, 3, 5, 8, 10, 13],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
            [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13]
        ];

        setInterval(getTime, 1000);

        function getTime() {
            const time = new Date();
            let hours = time.getHours();
            let minutes = time.getMinutes();
            let seconds = time.getSeconds();

            hours = (hours < 10 ? `0${hours}` : hours).toString().split('');
            minutes = (minutes < 10 ? `0${minutes}` : minutes).toString().split('');
            seconds = (seconds < 10 ? `0${seconds}` : seconds).toString().split('');

            // set hour
            displayNumber(hoursEls[0], +hours[0])
            displayNumber(hoursEls[1], +hours[1])

            // set minutes
            displayNumber(minutesEls[0], +minutes[0])
            displayNumber(minutesEls[1], +minutes[1])

            // set seconds
            displayNumber(secondsEls[0], +seconds[0])
            displayNumber(secondsEls[1], +seconds[1])
        }

        function displayNumber(el, number) {
            const pieces = el.querySelectorAll('.piece');
            pieces.forEach((piece, idx) => {
                if (states[+number].includes(idx + 1)) {
                    piece.classList.add('show');
                } else {
                    piece.classList.remove('show');
                }
            });
        }
    </script>
</body>

</html>
  • container：作为最外层容器，用于包含所有时钟的数字显示。使用 transform: scale(0.5);进行缩放，以便在页面上适当显示。
  • id="hours" class="flex, id="minutes" class="flex, id="seconds" class="flex 这三个 div 分别代表时钟的小时、分钟和秒的显示区域。
  • 每个区域包含两个 number，用于显示当前的数字。
  • piece 这些 div 元素代表数字的单个片段，每个.number 包含 13 个.piece，用于组合成 0-9 的数字。
  • 通过添加.show 类来显示特定的片段，以形成不同的数字。
  • 使用 document.querySelectorAll 获取小时、分钟和秒的.number 元素。
  • states 数组定义了 0-9 每个数字对应的片段状态。
  • setInterval(getTime, 1000);：每秒更新时间。
  • getTime 函数获取当前时间，并更新小时、分钟和秒的显示。
  • displayNumber 函数根据传入的数字和片段状态数组来显示或隐藏.piece 元素。
avatar
文章
阅读
粉丝