css3钟表

CSS3钟表是基于CSS3技术实现的一个时钟效果，它利用CSS3的动画特性和变形特性，使得钟表的指针能够实时运动，从而达到显示时间的效果。

.clock {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transform: perspective(100px) rotateX(30deg);
    animation: rotate 60s linear infinite;
}

.clock-face {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #333;
}

.hour {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 50px;
    margin-left: -2px;
    background-color: #333;
    transform-origin: bottom center;
    animation: hour 43200s linear infinite;
}

.minute {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 80px;
    margin-left: -1px;
    background-color: #333;
    transform-origin: bottom center;
    animation: minute 3600s linear infinite;
}

.second {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100px;
    margin-left: -1px;
    background-color: red;
    transform-origin: bottom center;
    animation: second 60s linear infinite;
}

@keyframes rotate {
    from {
        transform: perspective(100px) rotateX(30deg) rotateZ(0deg);
    }
    to {
        transform: perspective(100px) rotateX(30deg) rotateZ(360deg);
    }
}

@keyframes hour {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes minute {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes second {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
} 

上述代码中，我们分别使用了 .hour ，.minute 和 .second 来定义时针、分针和秒针，通过 transform-origin 属性使得指针旋转的中心位于底部中心点，通过 animation 属性使得指针能够实时动起来。

而在 .clock 中，我们则定义了整个钟表的样式，并且使用 transform 属性使得钟表整体向上倾斜 30 度，产生透视视角效果，而通过 animation 属性，我们又使得整个钟表在 60 秒内沿 Z 轴旋转了一圈，形成了动态的效果。

因此，通过运用CSS3技术，我们能够轻松实现一个精美的钟表效果。