css3版彩色的圆形时钟表代码

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.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版彩色的圆形时钟表代码

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效