建站
咨詢
售后
建站咨詢
新聞中心
創(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ò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(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è)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。
理論基礎(chǔ)
CSS3是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展。CSS即層疊樣式表（Cascading StyleSheet），是在網(wǎng)頁制作時(shí)采用的層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(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
解析：
這里創(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í)間長短需要自己把控
運(yùn)行效果
關(guān)于CSS3實(shí)現(xiàn)輪播圖的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
新聞名稱：CSS3實(shí)現(xiàn)輪播圖的方法-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://fisionsoft.com.cn/article/ceehoo.html
