CSS全屏圖片輪播是一種網站設計常用的效果,能夠優雅的呈現出多張圖片并讓其自動切換。下面是一個簡單的CSS全屏圖片輪播代碼:
body { margin: 0; padding: 0; } #slider { overflow: hidden; width: 100%; height: 100vh; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; animation: 20s shift infinite; } #slider figure img { width: 20%; float: left; height: 100vh; } @keyframes shift { 0% { left: 0%; } 20% { left: -100%; } 40% { left: -200%; } 60% { left: -300%; } 80% { left: -400%; } 100% { left: 0%; } }
這段CSS代碼使用了關鍵幀動畫和float布局,實現了圖片從左往右循環播放的效果。在這段CSS代碼中,主要的元素是id為“slider”的區塊和id名為“slider figure”的圖片集合。id為“slider”的區塊會將其所在區塊的大小設置為全屏高度。id名為“slider figure”的圖片集合是一個占總寬度5倍的圖片集合,里面包含了5張寬度為20%的圖片。
然后,在CSS中使用了動畫效果,即將圖片組合向右平移,使用了6個關鍵幀來完成。在設置關鍵幀時,將出現在屏幕上的第一張圖片放在了第6個關鍵幀上的“left: 0%”,這正是讓圖片組合看起來是一個無限循環。使用這段代碼即可實現CSS全屏圖片輪播效果。
下一篇java 事務和日志