純 CSS 實(shí)現(xiàn)圖片輪播效果是網(wǎng)頁(yè)設(shè)計(jì)中的常見需求,而不使用 JavaScript 的純 CSS 實(shí)現(xiàn)方法可以提高網(wǎng)頁(yè)性能。以下是一段基于 CSS3 的純 CSS 代碼示例。
.slideshow { position: relative; width: 600px; height: 400px; overflow: hidden; } .slideshow img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.5s; } .slideshow img.active { opacity: 1; } .slideshow img:nth-child(1) { opacity: 1; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } .slideshow .wrapper { position: absolute; width: 500%; height: 100%; animation: slidy 20s infinite; } .slideshow .slide { float: left; width: 20%; height: 100%; }
在上面的代碼中,使用了 CSS3 中的動(dòng)畫效果來(lái)完成圖片輪播。通過設(shè)置每張圖片的透明度,然后在輪播時(shí)通過動(dòng)畫改變圖片的位置來(lái)實(shí)現(xiàn)輪播效果。同時(shí),可以通過修改動(dòng)畫的時(shí)間間隔、圖片數(shù)量和容器大小等參數(shù)來(lái)達(dá)到不同的效果。
總的來(lái)說(shuō),純 CSS 實(shí)現(xiàn)圖片輪播是一種高效、簡(jiǎn)單的方式,在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)中可以靈活應(yīng)用。