色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 全屏圖片輪播代碼

錢良釵1年前8瀏覽0評論

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全屏圖片輪播效果。