13518219792
css3怎么實(shí)現(xiàn)輪播圖？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門戶設(shè)計(jì)推廣、行業(yè)門戶平臺(tái)運(yùn)營、重慶APP開發(fā)公司、手機(jī)網(wǎng)站制作、微信網(wǎng)站制作、軟件開發(fā)、成都多線服務(wù)器托管等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。
我們?cè)诰W(wǎng)頁上經(jīng)常會(huì)看到有一塊位置會(huì)有很多的圖片來回切換，這就是輪播圖，輪播圖的出現(xiàn)，讓重要的信息可以在一個(gè)位置顯現(xiàn)，那么，輪播圖是如何實(shí)現(xiàn)的呢？輪播圖的實(shí)現(xiàn)用js或者css都可以，本篇文章就來給大家介紹css3如何來實(shí)現(xiàn)輪播圖效果。
css3實(shí)現(xiàn)輪播圖效果可以利用CSS3 animation 屬性和 @keyframes 規(guī)則。
ainimation實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成：
1、通過類似Flash動(dòng)畫中的幀來聲明一個(gè)動(dòng)畫；
2、在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。
animation 屬性是一個(gè)簡寫屬性
語法：animation: name duration timing-function delay iteration-count direction。
animation屬性值在這里就不多介紹了，需要的話可以參考css手冊(cè)。
那下面我們就來直接看一個(gè)例子：
html：
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;
}
}說明：
展示容器大小和圖片大小一致
圖片添加 float 效果，不用考慮麻煩的 margin 問題
由于示例只有三個(gè)圖片，所以添加了三個(gè)動(dòng)畫階段，每一階段都是通過設(shè)置遞增的 margin-left 值達(dá)到切換的效果
設(shè)置的動(dòng)畫階段（如：35%~60%）是動(dòng)畫停留部分，和上一階段空余時(shí)間（如25%~35%）即為動(dòng)畫切換部分，各部分時(shí)間長短需要自己把控。
感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css3怎么實(shí)現(xiàn)輪播圖大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
