在Web开发的世界中，CSS是一个十分重要的技术。它可以用于布局、样式、动画等等方面。而在CSS中，我们也可以利用它的一些特性来打造一些有趣的效果。比如，在本文中我们要介绍的就是CSS世界时钟。
/* CSS代码开始 */
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
}
/* 设置时钟的样式 */
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background: #fff;
position: relative;
margin: 50px auto;
box-shadow: 0px 0px 0px 4px #ddd, inset 0px 0px 0px 3px #fff, inset 0px 0px 5px #ccc, 0px 0px 5px rgba(0, 0, 0, 0.1);
}
/* 设置时钟的刻度 */
.clock .mark {
width: 4px;
height: 10px;
background: #000;
position: absolute;
left: 148px;
top: 16px;
transform-origin: bottom;
}
.clock .mark:nth-child(1) {
transform: rotate(30deg);
}
.clock .mark:nth-child(2) {
transform: rotate(60deg);
}
.clock .mark:nth-child(3) {
transform: rotate(90deg);
}
.clock .mark:nth-child(4) {
transform: rotate(120deg);
}
.clock .mark:nth-child(5) {
transform: rotate(150deg);
}
/* 设置时钟的指针 */
.clock .hour,
.clock .minute,
.clock .second {
width: 2px;
height: 70px;
background: #000;
position: absolute;
left: 148px;
top: 50px;
transform-origin: bottom;
}
.clock .hour {
transform: rotate(30deg);
}
.clock .minute {
transform: rotate(180deg);
}
.clock .second {
background: red;
height: 80px;
transform: rotate(270deg);
animation: rotate 60s linear infinite;
}
/* 设置指针的动画 */
@keyframes rotate {
0% {
transform: rotate(270deg);
}
100% {
transform: rotate(630deg);
}
}
/* CSS代码结束 */在代码中，我们为时钟设置了一个圆形的
元素，然后利用CSS的transform属性来设置时钟的刻度和指针的位置。其中秒针还设置了一个旋转动画来模拟秒针移动的效果。这样，在页面上就可以呈现出一枚时钟的模样。
CSS世界时钟可以让我们更加深入地理解CSS的实际应用。如果你对此感兴趣，不妨自己动手试试，打造属于你自己的时钟效果吧。
本文链接：https://my.lmcjl.com/post/14123.html
展开阅读全文
4 评论