css时钟代码大全 |海信集团css系统登录

/*基础时钟*/
.clock{
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #ccc;
position: relative;
}
.clock .hour, .clock .minute, .clock .second{
width: 50%;
height: 5px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
transform: translate(-50%, -50%);
}
.clock .hour{
transform: translate(-50%, -50%) rotate(90deg);
}
.clock .minute{
transform: translate(-50%, -50%) rotate(180deg);
}
.clock .second{
transform: translate(-50%, -50%) rotate(270deg);
}
/*数字时钟*/
.clock{
font-family: 'Helvetica', sans-serif;
font-size: 5rem;
color: #000;
} 
/*动态时钟*/
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #ccc;
position: relative;
}
.clock .hour, .clock .minute, .clock .second{
width: 50%;
height: 5px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
transform: translate(-50%, -50%);
animation: rotate 12s linear infinite;
}
.clock .hour{
transform: translate(-50%, -50%) rotate(90deg);
animation-duration: 43200s;
}
.clock .minute{
transform: translate(-50%, -50%) rotate(180deg);
animation-duration: 3600s;
}
.clock .second{
transform: translate(-50%, -50%) rotate(270deg);
animation-duration: 60s;
}
@keyframes rotate{
from {transform: translate(-50%, -50%) rotate(0);}
to {transform: translate(-50%, -50%) rotate(360deg);}
}

这些代码中，基础时钟是一种简单的时钟样式，可以通过改变CSS属性来实现颜色、大小和边框等方面的变化。数字时钟漂亮而简洁，可以根据自己的需要修改字体和颜色等细节。动态时钟则可以产生更加流畅的动画效果，可根据需要自定义属性和时间参数。

总之，CSS时钟代码可以为网页设计师带来很多灵活性，它们可以将时间元素融入到页面中，并增加视觉吸引力和响应式设计。