圖片左右輪播是網頁制作中常見的效果,可以使頁面更加生動和有趣。在css3中,實現圖片左右輪播也非常簡便,只需要幾行代碼就可以實現。
/* 設置外層盒子 */ .div1{ width:800px; height:400px; margin:0 auto; overflow:hidden; position:relative; } /* 設置內層盒子 */ .div2{ width:3200px; height:400px; position:absolute; left:0; top:0; animation: move 8s linear infinite; } /* 設置圖片 */ .div2 img{ float:left; width:800px; height:400px; } /* 設置動畫 */ @keyframes move{ 0%{ left:0; } 100%{ left:-2400px; } }
以上代碼中,我們首先創建一個外層盒子div1,設置其寬度、高度、居中和隱藏溢出部分。然后,我們再創建一個內層盒子div2,設置其寬度、高度、絕對定位和動畫效果。接著,我們再在內層盒子中放入多張圖片,并設置它們的寬度和高度。最后,我們再設置動畫效果,讓內層盒子循環左右移動。
通過以上代碼,我們就可以輕松地實現圖片左右輪播效果了。當然,我們還可以通過改變代碼中的參數來實現不同的效果,比如調整動畫時間、調整圖片大小、添加過渡效果等等。