欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css手表秒針旋轉動畫

錢諍諍2年前11瀏覽0評論

CSS手表秒針旋轉動畫是一種經典的CSS動畫效果,通過使用CSS3的transform屬性以及animation屬性,我們可以輕松地實現手表秒針的轉動效果。

.clock {
position: relative;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #f5f5f5;
}
.hour-hand,
.minute-hand,
.second-hand {
position: absolute;
left: 50%;
transform-origin: bottom center;
transform: translateX(-50%);
}
.hour-hand {
width: 6px;
height: 50px;
border-radius: 6px 6px 0 0;
background-color: #333;
}
.minute-hand {
width: 4px;
height: 80px;
border-radius: 4px 4px 0 0;
background-color: #666;
}
.second-hand {
width: 2px;
height: 100px;
border-radius: 2px 2px 0 0;
background-color: #f00;
animation: rotate 60s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

代碼中,我們首先定義了一個.clock類作為手表的容器。然后,我們使用三個絕對定位的手表指針元素,分別對應時針、分針和秒針。

對于秒針,我們通過使用animation屬性來實現動畫效果。通過定義一個rotate關鍵幀動畫,我們可以讓秒針在60秒內完成一圈旋轉,然后無限循環。

最后,我們只需要在HTML中添加一個.clock元素,并在其中添加三個指針元素即可。