色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3時鐘動畫效果代碼

洪振霞2年前12瀏覽0評論

CSS3時鐘動畫效果是一種非常有趣的動畫效果,在很多網站中都有應用。使用CSS3時鐘動畫效果能夠讓你的網站更加生動、有趣、吸引人。

.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #fff;
position: relative;
margin: 0 auto;
animation: rotate 60s infinite linear;
}
.hour,
.minute,
.second {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, -100%);
background-color: #000;
}
.hour {
width: 8px;
height: 60px;
border-radius: 10px 10px 0 0;
}
.minute {
width: 6px;
height: 80px;
border-radius: 10px 10px 0 0;
}
.second {
width: 4px;
height: 100px;
border-radius: 10px 10px 0 0;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}

上述代碼中,我們首先定義了一個大小為300x300的圓形時鐘容器,并為其設置了邊框圓角和背景色。然后,我們分別定義了時、分、秒三個指針,并為它們設置了不同的樣式。最后,我們使用@keyframes定義一個名為rotate的動畫,使整個時鐘容器可以無限旋轉。