越來越多的網站開始采用CSS3動畫來制作頁面效果,CSS3動畫可以使網頁元素看起來更加生動有趣,同時也可以增加網站的吸引力。CSS3動畫的一個特點就是可以重復,比如可以讓元素無限循環旋轉、彈跳等等,下面就來介紹一下CSS3動畫的重復應用。
/* 循環旋轉 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animated { animation: rotate 2s infinite; } /* 心跳效果 */ @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .animated { animation: heartbeat 2s infinite; } /* 跳躍 */ @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } } .animated { animation: jump 0.5s infinite; } /* 翻轉 */ @keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(0); } } .animated { animation: flip 3s infinite; }
上面是幾種常見的CSS3動畫重復應用,分別是循環旋轉、心跳效果、跳躍、翻轉等。循環旋轉和翻轉都采用了無限循環,心跳效果和跳躍采用了往返循環。這些效果都可以通過@keyframes關鍵字來定義動畫,并通過animation屬性來循環播放動畫。CSS3動畫的使用可以讓網頁看起來更加生動有趣,也可以加強用戶體驗,提升網站的吸引力。
下一篇css3 動畫生硬