CSS的動畫特效是網(wǎng)頁設(shè)計中非常重要的一部分,可以增加頁面的生動感和交互性。下面我們來介紹一些常見的動畫特效。
/* 1. 旋轉(zhuǎn)動畫 */ .rotate { animation: rotate 2s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 2. 縮放動畫 */ .scale { animation: scale 2s infinite; } @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } /* 3. 淡入淡出動畫 */ .fade { animation: fade 2s infinite; } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
以上是三種比較常見的動畫特效,你可以根據(jù)需要進行修改和組合使用。除此之外,還有很多其他的動畫效果,如滑動、彈跳、閃爍等等,只要靈活運用,可以為網(wǎng)頁增添更多的絢麗色彩。