CSS可以讓網頁變得更加動態,其中一個方法是通過CSS動畫實現。 CSS動畫可以讓元素在頁面上移動、旋轉和放大縮小。
/* 設置動畫的CSS樣式 */ @keyframes my-animation { 0% { transform: translateX(0px); } 50% { transform: translateX(200px); } 100% { transform: translateX(0px); } } /* 應用動畫到元素上 */ .box { animation: my-animation 2s ease-in-out infinite; }
在這個例子中,使用了@keyframes關鍵字來創建動畫。定義了三個位置狀態(0%,50%,100%),用transform屬性將元素從一個位置轉移到另一個位置。接下來將這個動畫應用到一個CSS類.box上。將會在2秒內移動200像素,并一直重復這個動畫。
除了移動,CSS動畫還可以用在其他的屬性上,比如旋轉、放大縮小等等。通過CSS動畫,您可以讓網頁更加生動、有趣,也可以讓用戶獲得更好的使用體驗。
上一篇css可以寫在標簽內部嗎
下一篇css只設置透明度