寫在前面
天貓?zhí)詫毜拿利惼恋囊路蛘咂渌锲返膱D片一張張從眼前流轉(zhuǎn) 扑馁，總是讓人忍不住去點(diǎn)擊購(gòu)買。若自己能夠用所學(xué)的知識(shí)做到這個(gè)效果黍翎，那肯定是最好不過(guò)了面徽。
一 ，主要步驟
<1>布局
1，用<div>建立瀏覽窗口趟紊，設(shè)定好width height 氮双。
2，使用列表標(biāo)簽<ul> <li> 排列主要內(nèi)容霎匈。
<2>動(dòng)畫效果戴差。
CSS3 @keyframes 規(guī)定動(dòng)畫的具體內(nèi)容。用 animation 將@keyframes 綁定到<ul> 铛嘱，使<ul>運(yùn)動(dòng)起來(lái)暖释。
CSS3動(dòng)畫 無(wú)縫輪播：
讓第一組圖片和最后一組圖片保持一致，計(jì)算好在窗口停留的時(shí)間 和一組圖片轉(zhuǎn)換到另外一組圖片的時(shí)間墨吓。
輪播案例的效果：9張照片在顯示3張圖片的窗口輪流播放球匕。
圖片共9張分為3組.png
圖片第一組.png
圖片第二組.png
圖片第三組.png
動(dòng)畫的代碼
@keyframes mymove {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
30% {
margin-left: -1200px;
}
70% {
margin-left: -1200px;
}
80% {
margin-left: -2400px;
}
100% {
margin-left: -2400px;
}
}
.banner ul {
width: 300%;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid red;
animation: mymove 8s linear infinite;
}
要使9張圖片 每次只顯示3張圖片出現(xiàn)，需要在瀏覽窗口所在的<div>中 設(shè)定 overflow:hidden;
另肛真，如果需要實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上 谐丢， 輪播暫停時(shí): ul:hover{animation-play-state: paused;}
二 ，知識(shí)點(diǎn)
animation的所有屬性
動(dòng)畫的屬性.png
例如
div {
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
簡(jiǎn)單寫法
animation:myfirst 5s linear 2s infinite alternate;
其他相關(guān)的動(dòng)畫知識(shí)點(diǎn) 蚓让，后期運(yùn)用再繼續(xù)分享 乾忱。
以上！
