在HTML中,我們可以使用<img>標簽來插入圖片,但是有時候,我們希望這些圖片能夠動起來,比如說:圖片可以向左或向右移動,或者像幻燈片一樣循環播放。在這篇文章中,我將介紹一些HTML代碼,讓你可以輕松地為你的網頁添加圖片動畫效果。
<style> .image { position: relative; animation-duration: 2s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slidein { 0% { left: 0; } 100% { left: 100%; } } </style> <div class="image"> <img src="image.jpg" alt="圖片"> </div>
上面這段<style>標簽中的代碼是用來設置動畫的,其中,animation-duration
屬性表示動畫持續時間;animation-name
屬性指定要使用的動畫名稱;animation-iteration-count
屬性表示動畫重復次數;animation-direction
屬性定義動畫播放方向。
下面這段<div>標簽是用來包裹圖片的,它的類名是“image”。這個類名在之前的CSS代碼塊中有對應的樣式,用來定義圖片的初始位置(relative),以及如何移動(通過動畫 keyframes)。
在這個簡單的例子中,圖片是向右滑動的,可以通過調整CSS代碼中的left屬性來控制它的移動方向與速度。
在HTML中,想要添加圖片動畫效果是非常簡單的。嘗試著在你的網頁中添加一些圖片,并使用本文提供的代碼實現動畫效果吧!