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