在CSS中,我們經常需要使用GIF動畫來展示一些眼花繚亂的效果。加載GIF圖片,有幾種方法可以使用。
首先,我們可以使用CSS中的背景屬性,加載GIF動畫作為元素的背景。如下所示:
.bg-gif { background-image: url('loading.gif'); background-repeat: no-repeat; background-position: center center; }
這里我們使用了一個class為bg-gif的元素,并設置了它的背景圖片為loading.gif文件。我們還設置了背景不重復,居中顯示。這樣,當我們把這個class添加到元素上時,就會出現GIF動畫的效果。
另外,我們還可以使用CSS中的animation屬性,來添加GIF動畫。如下:
@keyframes loading { 0% { background-position: 0 0; } 100% { background-position: -100px 0; } } .gif { animation: loading 2s linear infinite; }
在這個例子中,我們使用keyframes定義了一個名為loading的動畫,來控制元素背景的位置變化。初始位置為0,結束位置為-100px,動畫持續時間為2秒,并且線性運動。然后,我們再通過animation屬性,將這個動畫應用到一個class為gif的元素上,并設置無限播放。這樣,我們就可以在該元素上看到GIF動畫了。
上一篇h5css3特性