CSS動畫是網(wǎng)頁設(shè)計中很重要的一部分,它可以為網(wǎng)站增添更加生動的效果,使網(wǎng)站變得更加吸引人。其中,不停的動畫也是非常常見的,下面將介紹如何設(shè)置CSS動畫不停的示例。
/* 設(shè)置不停的旋轉(zhuǎn)動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 設(shè)置不停的閃爍動畫 */
.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
上述代碼中,我們分別設(shè)置了不停的旋轉(zhuǎn)和閃爍動畫。其中,我們使用了CSS3動畫屬性animation,設(shè)定了動畫所需時間2秒和1秒,動畫執(zhí)行方式循環(huán)(infinite),以及旋轉(zhuǎn)和閃爍所需的關(guān)鍵幀(keyframes)動畫。
在實際網(wǎng)頁設(shè)計中,我們可根據(jù)需要調(diào)整動畫所需的時間和形式,從而達到更加生動、吸引人的效果。