CSS3實(shí)現(xiàn)輪播圖的方法-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括東阿網(wǎng)站建設(shè)、東阿網(wǎng)站制作、東阿網(wǎng)頁制作以及東阿網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，東阿網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到東阿省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

理論基礎(chǔ)

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

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

主體思想

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

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

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

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

注意事項(xiàng)

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

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

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

• 本文中示例最后一個(gè)圖片到第一個(gè)圖片沒有切換效果，一個(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 問題

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

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

運(yùn)行效果

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

本文名稱：CSS3實(shí)現(xiàn)輪播圖的方法-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article0/ceehoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、企業(yè)建站、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)