這篇文章將為大家詳細(xì)講解有關(guān)CSS3實(shí)現(xiàn)輪播圖的方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供淮上網(wǎng)站建設(shè)、淮上做網(wǎng)站、淮上網(wǎng)站設(shè)計(jì)、淮上網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、淮上企業(yè)網(wǎng)站模板建站服務(wù)，10余年淮上做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

理論基礎(chǔ)

CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展。CSS即層疊樣式表（Cascading StyleSheet），是在網(wǎng)頁(yè)制作時(shí)采用的層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。CSS龐大而且比較復(fù)雜，CSS3把CSS分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。CSS3中的模塊包括： 盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效 、多欄布局等。

CSS3 animation 屬性和 @keyframes 規(guī)則

主體思想

1、準(zhǔn)備相同大小的多個(gè)圖片

2、將要展示圖片橫排放在一個(gè)圖片容器里面

3、在圖片容器外再加一個(gè)展示容器，展示容器大小為圖片大小

4、給圖片容器添加自定義動(dòng)畫(huà)，在動(dòng)畫(huà)不同階段設(shè)置遞增的偏移值

注意事項(xiàng)

• 動(dòng)畫(huà)效果分為切換和停留兩部分

• 自定義動(dòng)畫(huà)階段與圖片數(shù)量相關(guān)

• 動(dòng)畫(huà)各階段偏移值與圖片大小相關(guān)

• 本文中示例最后一個(gè)圖片到第一個(gè)圖片沒(méi)有切換效果，一個(gè)思路是可以由最后一個(gè)圖片再挨個(gè)切換到第一個(gè)圖片

HTML

<p id="container">
    <p id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </p>
</p>

解析：
這里創(chuàng)建了三個(gè) img 元素，img 元素外面是圖片容器，圖片容器外面是展示容器。

CSS

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}

#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

解析：

1、展示容器大小和圖片大小一致

2、圖片添加 float 效果，不用考慮麻煩的 margin 問(wèn)題

3、由于示例只有三個(gè)圖片，所以添加了三個(gè)動(dòng)畫(huà)階段，每一階段都是通過(guò)設(shè)置遞增的 margin-left 值達(dá)到切換的效果

4、設(shè)置的動(dòng)畫(huà)階段（如：35%~60%）是動(dòng)畫(huà)停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫(huà)切換部分，各部分時(shí)間長(zhǎng)短需要自己把控

運(yùn)行效果

關(guān)于CSS3實(shí)現(xiàn)輪播圖的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：CSS3實(shí)現(xiàn)輪播圖的方法
文章轉(zhuǎn)載：http://aaarwkj.com/article30/gdgsso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、軟件開(kāi)發(fā)、外貿(mào)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)