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

css3動畫 旋轉

錢斌斌2年前7瀏覽0評論

在CSS3中,有一個強大的特性:動畫。CSS3動畫可以為我們的頁面添加很多生動活潑的效果,使得網頁更加有吸引力。其中,旋轉動畫是CSS3中比較常見的一種動畫效果。

/* 給一個div添加旋轉動畫 */
div {
width: 100px;
height: 100px;
background-color: #f00;
/* 指定動畫屬性 */
animation: rotate 2s infinite linear;
/* 指定動畫名稱 */
animation-name: rotate;
}
/* 指定一個名為“rotate”的動畫 */
@keyframes rotate {
/* 指定動畫的0%和100%狀態 */
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

上述代碼中,我們給一個div添加了旋轉動畫,每2秒鐘旋轉一圈,并且無限循環,直到頁面被關閉。該動畫由兩個部分組成:動畫屬性和動畫名稱。動畫屬性是指動畫的一些基本屬性,如執行時間、循環次數、動畫運動方式等。而動畫名稱是指動畫的名稱,用于在@keyframes中定義動畫的效果。

通過上述代碼,我們可以實現一個簡單的旋轉動畫。當然,CSS3動畫功能還有很多其他的效果,如縮放、移動等。我們只需要通過學習更多的動畫屬性和動畫名稱,就可以創造出更加豐富、多樣的動畫效果。