User:物灵/时钟样式.css

@keyframes spin {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
#spin-wrapper, #spin-second, #spin-minute, #spin-hour {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}
#spin-second-wrapper, #spin-minute-wrapper, #spin-hour-wrapper {
    position: absolute;
}
#spin-second {
    animation: spin 60s linear infinite;
    background: red;
    clip-path: polygon(48% 50%, 52% 50%, 52% 10%, 48% 10%);
}
#spin-minute {
    animation: spin 3600s linear infinite;
    background: black;
    clip-path: polygon(48% 50%, 52% 50%, 52% 20%, 48% 20%);
}
#spin-hour {
    animation: spin 216000s linear infinite;
    background: black;
    clip-path: polygon(48% 50%, 52% 50%, 52% 30%, 48% 30%);
}
#spin-wrapper {
    background: yellow;
    clip-path: circle(50%);
}