css自動輪播原理(小白篇)
摘要：
這裡是一個小白基地,一切都是從不會到會,雖然學習是一個苦逼的不得了的過程,但是隻要你在路上,它喵喵的就不要怕(我都不怕,你怕個毛啊~)!!!
今天分享一個css自動輪播怎麼寫
下面上一下我們的佈局:
...
這裡是一個小白基地,一切都是從不會到會,雖然學習是一個苦逼的不得了的過程,但是隻要你在路上,它喵喵的就不要怕(我都不怕,你怕個毛啊~)!!!
今天分享一個css自動輪播怎麼寫
下面上一下我們的佈局:
佈局程式碼
css裡面樣式說一下思路:
div.wrap這個標籤就是一個電視機,放映著每一張圖片,ul這個標籤就是幾張圖片的一個大容器,那麼裡面的li存放了每一張圖片. 把ul定位一下,通過關鍵動畫幀@keyframes去改變ul相對於wrap的位置不就ok啦嘛 ~
這個是開啟關鍵動畫幀
這裡要注意了,我們寫了四個li是為什麼呢, 不是隻有三張圖片在滾動嘛,其原因是,第四個li要跟第一個li用同一張圖片 為什麼呢 ? 看下圖的解析 !
動畫原理解析
通過上圖可以看出來,動畫運動到最末尾的時候,也就是顯示第四張圖片了,然而我們的第四張圖片跟第一張圖片是一樣的鴨,所以當動畫回到最開始要重複播放的時候 !!!!奇蹟發生啦 !!! 眼睛會產生錯覺,兩張第一張的圖片重疊了,所以產生自動輪播的效果,此處應有掌聲 ~