CSS中的圖片垂直平鋪滾動,是一種非常常用且實用的效果,在網頁設計中常用于制作滾動海報、橫幅、廣告等。CSS的background屬性可以設置背景圖像的位置,在背景圖像中通過background-position來指定偏離值,從而實現垂直平鋪滾動的效果。
body { background: url(image.jpg) repeat-y top center; /*在本代碼中,我們首先指定圖片位置為頂部(center), 并利用repeat-y的重復屬性,讓圖片在網頁中不斷平鋪。 top center代表圖片具體的位置,也可以寫成其他值比如left bottom、right top等*/ animation: marquee 15s linear infinite; /*在此處增加了瀏覽器系動畫marquee來實現圖片的滾動效果,代碼屬性包括時間、緩動函數和動畫次數*/ } @keyframes marquee { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } /*這段代碼為網頁中垂直平鋪滾動的圖片效果設置了動畫,transform: translateY()規定了圖片垂直方向的位移,括號內的數值代表圖片被卷走的高度*/
通過CSS中的background和animation屬性,我們不難實現一個具有滾動效果的圖片海報。同時,也可以通過調整代碼中的不同屬性或數值來制作出不同的垂直平鋪滾動效果。