CSS圖片向左自動滾動,是一種展示圖片的常見效果,可以讓網(wǎng)站看起來更加動態(tài)。下面介紹一種實現(xiàn)方法。
<div class="scrolling"> <img src="image.jpg"> </div>
以上代碼中,我們使用了CSS3中的關(guān)鍵幀動畫(@keyframes)來實現(xiàn)圖片的自動滾動,將圖片元素(<img>)設為動畫對象,設定transform屬性為translateX,使其在水平方向上移動。同時,通過overflow屬性將圖片元素所在的父容器隱藏,即可實現(xiàn)圖片的滾動效果。
在關(guān)鍵幀動畫的定義中,我們將初始狀態(tài)設為圖片的右端(translateX(100%)),結(jié)束狀態(tài)設為圖片的左端(translateX(-100%)),使圖片在20秒的時間內(nèi)從右往左滾動,線性勻速運動,并將動畫無限循環(huán)播放。
以上代碼只是一種實現(xiàn)思路,根據(jù)實際需求可以進行更多的修改和擴展。