css3版彩色的圆形时钟表代码（css画时钟）

CSS3版彩色的圆形时钟表是一款非常酷炫的时钟表，它采用了最新的CSS3技术，可以展现出各种各样的颜色，为我们的网页增加了一份时尚感和色彩感。

.clock {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    margin: 50px auto;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.hand {
    position: absolute;
    height: 3px;
    background-color: #000;
    transform-origin: center;
}
.second-hand {
    width: 80px;
    animation: rotate 60s linear infinite;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.minute-hand {
    width: 60px;
    background-color: #00c4ff;
    animation: rotate-minutes 3600s linear infinite;
}
@keyframes rotate-minutes {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.hour-hand {
    width: 40px;
    background-color: #ff6275;
    animation: rotate-hours 43200s linear infinite;
}
@keyframes rotate-hours {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    transform: translate(-50%,-50%);
}
.mark {
    position: absolute;
    width: 3px;
    height: 15px;
    background-color: #000;
    transform-origin: center;
    top: 10px;
    left: 50%;
}
.twelve {
    transform: translate(-50%,0);
}
.three {
    transform: translate(0,-50%);
}
.six {
    transform: translate(50%,0);
}
.nine {
    transform: translate(0,50%);
}
.one {
    transform: translate(30%, -27%);
}
.two {
    transform: translate(45%, -45%);
}
.four {
    transform: translate(45%, 45%);
}
.five {
    transform: translate(30%, 27%);
}
.seven {
    transform: translate(-30%, -27%);
}
.eight {
    transform: translate(-45%, -45%);
}
.ten {
    transform: translate(-45%, 45%);
}
.eleven {
    transform: translate(-30%, 27%);
}
    

以上就是CSS3版彩色的圆形时钟表的代码，其中包括了时针、分针、秒针以及标记的样式，还有一些特殊的CSS属性，例如动画效果，都可以通过修改代码来实现不同的效果，让你的页面更加出彩。如果你想要使用这个时钟表，只需要将代码复制到你的HTML文件中即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！