HTML&CSS ：美爆了！这时钟也太好看了吧

这段代码创建了一个动态的闹钟动画效果，通过CSS技术实现了时针、分针和秒针的旋转效果，为页面添加了视觉吸引力和动态感。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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 {
            width: 100vw;
            align-items: center;
            display: flex;
            justify-content: center;
            margin: 0;
            overflow: hidden;
            background: #8fd5d5;
        }

        header {
            position: relative;
            margin: 50px auto;
            text-align: center;
        }

        .navigation {
            display: inline-block;
            margin: 8px;
            border: 2px solid #57bebb;
            font-family: 'Alegreya Sans', sans-serif;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
            color: #57bebb;
            width: 120px;
            height: 30px;
        }

        .navigation:hover {
            color: white;
            border: 2px solid white;
        }

        .navigation.selected {
            color: gray;
            border: 2px solid gray;
        }

        .return {
            position: relative;
            display: block;
            margin: auto;
            font-family: 'Alegreya Sans', sans-serif;
            font-size: 22px;
            text-align: center;
            border: 2px solid #57bebb;
            padding: 0 15px;
            text-decoration: none;
            line-height: 40px;
            color: #57bebb;
            width: 150px;
            height: 40px;
        }

        .return:hover {
            color: white;
            border: 2px solid white;
        }

        .contain-clock {
            position: relative;
            margin: -200px auto;
            width: 155px;

        }

        .face-1 {
            position: absolute;
            top: 23px;
            left: 23px;
            background: white;
            border-radius: 50%;
            width: 109px;
            height: 109px;
            z-index: 3;
        }

        .face-2 {
            position: relative;
            margin: 400px auto 0px;
            background: white;
            border: 15px solid #ed6e46;
            border-radius: 50%;
            width: 125px;
            height: 125px;
            z-index: 2;
        }

        .line {
            position: absolute;
            left: 50%;
            margin-left: -3px;
            background: gray;
            width: 6px;
            height: 126px;
        }

        .line-2 {
            left: 63px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
        }

        .line-3 {
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg) translate3d(0, 0, 0);
            margin-left: -1px;
            width: 2px;
        }

        .line-4 {
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg) translate3d(0, 0, 0);
            margin-left: -1px;
            width: 2px;
        }

        .line-5 {
            transform: rotate(60deg);
            -webkit-transform: rotate(60deg) translate3d(0, 0, 0);
            margin-left: -1px;
            width: 2px;
        }

        .line-6 {
            transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            margin-left: -1px;
            width: 2px;
        }

        .hour {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            background: #f8b65b;
            transform-origin: top;
            -webkit-transform-origin: top;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            border-radius: 50px;
            width: 8px;
            height: 35px;
            z-index: 5;
        }

        .minute {
            position: absolute;
            top: 5px;
            left: 55px;
            margin-left: -4px;
            background: #f8b65b;
            border-radius: 50px;
            transform-origin: bottom;
            -webkit-transform-origin: bottom;
            width: 8px;
            height: 50px;
            z-index: 3;
            animation: tick-tock 3600s steps(60, end) infinite;
            -webkit-animation: tick-tock 3600s steps(60, end) infinite;
        }

        .second {
            position: absolute;
            top: 5px;
            left: 56px;
            margin-left: -2px;
            background: #333333;
            border-radius: 50px;
            transform-origin: bottom;
            -webkit-transform-origin: bottom;
            width: 2px;
            height: 50px;
            z-index: 5;
            animation: tick-tock 60s steps(60, end) infinite;
            -webkit-animation: tick-tock 60s steps(60, end) infinite;
        }

        .center {
            position: absolute;
            top: 62px;
            margin-top: -15px;
            left: 55px;
            margin-left: -8px;
            border-radius: 50%;
            background: #ed6e46;
            width: 16px;
            height: 16px;
            z-index: 20;
        }

        .arm {
            position: absolute;
            top: -50px;
            left: 73px;
            background: gray;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            border-radius: 50px;
            width: 10px;
            height: 230px;
            z-index: 1;
        }

        .arm-2 {
            left: 71px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
        }

        .bell {
            position: absolute;
            top: -30px;
            background: #ed6e46;
            border-radius: 50% 50% 10% 10%;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            width: 65px;
            height: 35px;
            z-index: 2;
        }

        .bell-2 {
            left: 90px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
        }

        .hammer {
            position: absolute;
            top: -25px;
            left: 76px;
            background: gray;
            width: 3px;
            height: 30px;
            z-index: 1;
        }

        .hammer:before {
            content: '';
            display: block;
            position: absolute;
            left: -6px;
            background: gray;
            border-radius: 50px;
            width: 15px;
            height: 5px;
        }

        .handle {
            position: absolute;
            top: -68px;
            left: 32px;
            border: 8px solid gray;
            border-radius: 50px 50px 0 0;
            width: 75px;
            height: 30px;
        }

        .handle:after {
            content: '';
            display: block;
            position: absolute;
            top: 26px;
            background: #8fd5d5;
            width: 75px;
            height: 15px;
        }

        @keyframes tick-tock {
            to {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes tick-tock {
            to {
                -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>

    <div class="contain-animation">
        <div class="contain-clock">
            <div class="face-1">
                <div class="hour"></div>
                <div class="minute"></div>
                <div class="second"></div>
                <div class="center"></div>
            </div>

            <div class="face-2">
                <div class="line"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
                <div class="line line-4"></div>
                <div class="line line-5"></div>
                <div class="line line-6"></div>
            </div>

            <div class="arm"></div>
            <div class="arm arm-2"></div>

            <div class="bell"></div>
            <div class="bell bell-2"></div>

            <div class="hammer"></div>

            <div class="handle"></div>
        </div>
    </div>
</body>

</html>

HTML 结构

contain-animation: 创建一个包含动画的容器。
contain-clock: 创建一个包含闹钟的容器。
face-1: 创建钟面的第一层，包含时针、分针、秒针和中心点。
hour: 创建时针。
minute: 创建分针。
second: 创建秒针。
center: 创建中心点。
face-2: 创建钟面的第二层，包含刻度线。
多个line: 创建刻度线。
arm: 创建钟臂。
bell: 创建钟铃。
hammer: 创建钟锤。
handle: 创建钟柄。

CSS 样式

.contain-animation: 设置动画容器的样式。
.contain-clock: 设置闹钟容器的样式，包括位置、尺寸和边距。
.face-1: 设置钟面的第一层样式，包括位置、背景色、圆角和尺寸。
.face-2: 设置钟面的第二层样式，包括位置、背景色、边框、圆角和尺寸。
.line: 设置刻度线的样式，包括位置、背景色、宽度和高度。
.hour: 设置时针的样式，包括位置、背景色、圆角、旋转中心和尺寸。
.minute: 设置分针的样式，包括位置、背景色、圆角、旋转中心和尺寸。
.second: 设置秒针的样式，包括位置、背景色、圆角、旋转中心和尺寸。
.center: 设置中心点的样式，包括位置、背景色和圆角。
.arm: 设置钟臂的样式，包括位置、背景色、旋转角度、圆角和尺寸。
.bell: 设置钟铃的样式，包括位置、背景色、圆角和尺寸。
.hammer: 设置钟锤的样式，包括位置、背景色和尺寸。
.handle: 设置钟柄的样式，包括位置、背景色、边框、圆角和尺寸。
@keyframes tick-tock: 定义秒针和分针的动画，使其旋转。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！