CSS動畫是指用CSS的屬性來表現頁面元素的移動、旋轉或者變形,讓網頁看起來更加生動和有趣。動畫可以使網頁更加吸引人,增加網頁的用戶體驗度。
/* 以下是一個CSS動畫的例子 */ div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes example { 0% {left: 0;} 50% {left: 200px;} 100% {left: 0;} }
以上代碼中,我們定義了一個div元素,它的背景色是紅色。然后通過CSS動畫的屬性來實現這個div在頁面中橫向移動的功能。其中,關鍵字@keyframes聲明了一個名為example的動畫,并定義了它的起始、中間和結束狀態,從而使div在頁面中移動。
除了移動之外,CSS動畫還可以通過旋轉、變形等方式來表達元素的變化。使用CSS動畫可以輕松地為網頁加入一些有趣的特效,讓用戶感到驚喜和愉悅。
上一篇css什么時候出