CSS是一種能夠?qū)崿F(xiàn)網(wǎng)頁(yè)排版與現(xiàn)代網(wǎng)頁(yè)制作的語(yǔ)言，Banner輪播效果是目前網(wǎng)站常用的宣傳banner展示方式。接下來(lái)我們來(lái)看看如何利用CSS來(lái)實(shí)現(xiàn)Banner輪播效果。
<html>
<head>
<style type="text/css">
#banner {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
#banner img {
display: inline-block;
width: 600px;
height: 300px;
}
@keyframes banner {
from {left: 0;}
to {left: -1200px;}
}
#banner img:first-child {
position: absolute;
left: 0;
animation: banner 5s infinite;
}
#banner img:nth-child(2) {
position: absolute;
left: 600px;
}
#banner img:nth-child(3) {
position: absolute;
left: 1200px;
}
</style>
</head>
<body>
<div id="banner">
<img src="banner1.jpg" />
<img src="banner2.jpg" />
<img src="banner3.jpg" />
</div>
</body>
</html>在上面的代碼中，我們創(chuàng)建了一個(gè)寬度為600px、高度為300px的Banner區(qū)域。通過(guò)設(shè)置overflow:hidden來(lái)隱藏Banner區(qū)域?qū)挾韧獾牟糠帧Ｔ贐anner區(qū)域中，我們聲明了三個(gè)img標(biāo)簽，并將第一個(gè)img標(biāo)簽的位置固定在Banner區(qū)域左側(cè)，同時(shí)利用CSS3動(dòng)畫屬性實(shí)現(xiàn)img標(biāo)簽依次向左滾動(dòng)。具體實(shí)現(xiàn)步驟如下：
- 為Banner區(qū)域和Banner圖片添加CSS3過(guò)渡動(dòng)畫屬性。
- 在Banner圖片中設(shè)置第一個(gè)img標(biāo)簽的位置固定在Banner區(qū)域左側(cè)，設(shè)置animation動(dòng)畫屬性來(lái)實(shí)現(xiàn)Banner圖片的循環(huán)滾動(dòng)效果。同時(shí)，第二張和第三張圖片的位置分別設(shè)置為Banner區(qū)域左側(cè)一張圖片寬度的距離和兩張圖片寬度的距離。
- 利用CSS3中的@keyframes屬性來(lái)定義動(dòng)畫的隊(duì)列，實(shí)現(xiàn)圖片滾動(dòng)的效果。
通過(guò)這樣的操作方式，我們可以快速地將Banner輪播效果添加到網(wǎng)站中，為網(wǎng)站的宣傳功能提升更多的效果。