前言

無意見看到了一個(gè)網(wǎng)站的一個(gè)動(dòng)畫的跑馬燈效果很不錯(cuò)，這篇博客將用css實(shí)現(xiàn)跑馬燈效果，剖析它是如何實(shí)現(xiàn)的！并且我也推薦用css實(shí)現(xiàn)這種無縫滾動(dòng)的跑馬燈，效果看起來更平滑，用js定時(shí)器實(shí)現(xiàn)的會(huì)有明顯的抖動(dòng)效果！

最終效果

源碼在文末獲取!

目標(biāo)網(wǎng)站效果：

我做出的效果：

當(dāng)然你要是放一些好看的圖片就看起來更好了，這里只是對(duì)標(biāo)我項(xiàng)目需求，沒有更換好看的圖片！

做法分析

這個(gè)效果用css實(shí)現(xiàn)很簡單，無非就是一個(gè)css動(dòng)畫，鼠標(biāo)移動(dòng)到上面動(dòng)畫暫停。

這張圖顯示怎么做很清晰吧！讓比較長的小盒子在紅色盒子里滾動(dòng)就行，然后超出這個(gè)紅色視口盒子就隱藏！

也就是讓css動(dòng)畫向左移動(dòng)藍(lán)色盒子的長度，然后讓動(dòng)畫無限循環(huán)！

當(dāng)然，這里我要重點(diǎn)說的是這個(gè)bug，這樣做的最終并不是無縫銜接的！

如上圖，當(dāng)一次動(dòng)畫結(jié)束，循環(huán)進(jìn)入下一次循環(huán)的時(shí)候，后面總會(huì)有空白，對(duì)于這個(gè)問題，我們?cè)鯓訉?shí)現(xiàn)無縫銜接滾動(dòng)呢？

很簡單，就是加長滾動(dòng)的這個(gè)綠色盒子，給他加后面幾張圖片，這幾張圖片和開始的幾張圖片相同，至于加幾張圖片就看你的紅色大盒子的長度了，也就是說紅色盒子決定你能看到幾張圖滾動(dòng)，你就要加幾張圖作為這個(gè)視覺誤差！（放到css中，這三張圖片的外邊距+圖片長度=紅色盒子的長度，動(dòng)畫滾動(dòng)的長度依舊不變）

現(xiàn)在原理搞清楚了，以后寫這種效果不是很簡單，當(dāng)然，放到我們的實(shí)際項(xiàng)目中，肯定是會(huì)有一點(diǎn)視覺誤差的，因?yàn)槲覀兊囊暱诤凶樱▓D中的紅色盒子）總是在項(xiàng)目中有固定的長度，你還要做好圖片的長度計(jì)算，要不要加外邊距等等，還是要算一下像素的，最后差一點(diǎn)像素也沒關(guān)系！但是不能差太多哦！不然后面空白太多了！

至于整個(gè)頁面的布局，我依舊建議建議使用flex布局，只能說flex確實(shí)快捷方便好用，這個(gè)布局中還要涉及到定位，浮動(dòng)+定位的方式也會(huì)出現(xiàn)一些莫名的定位問題！

css在這個(gè)項(xiàng)目中還有一些:hover

另外，我項(xiàng)目中用的是bootstrap，因此下面的代碼中引入了bootstrap3的css（基本沒起作用，大多樣式我自己寫的，你要不想引入，作者頭像的border-radius:50%記得設(shè)置）

源碼