CSS 實現(xiàn)滾動的圖片欄 實例代碼
發(fā)布時間：2018-09-25 11:06:19 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS 實現(xiàn)滾動的圖片欄 實例代碼,需要的朋友可以參考下
在一些網(wǎng)站上可以經(jīng)常看到有一些圖片進(jìn)行持續(xù)不斷的滾動，這個效果可以通過css的動畫效果來實現(xiàn)。具體效果如下
主要原理是通過動畫向左移動。
首先給出兩組一樣的圖片（同一行上），讓整體圖片向左移動一組圖片的長度，
這樣在動畫結(jié)束時會迅速還原到原來位置，而此時正好與第二組圖片交替，看起來就像是一組圖片在不斷循環(huán)向左滾動。
具體步驟如下：
1、設(shè)置主體代碼各處兩組一樣的圖片
<nav>
<ul>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
</ul>
</nav>
2、設(shè)置nav的大小，寬度為一組圖片相加的寬度，高度為圖片的高度。
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
}
3、設(shè)置ul大小，寬度為nav的兩倍，高度與nav相同，并指定動畫相關(guān)屬性
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
4、定義動畫，主要是向左移動一組圖片的長度
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
5、增加鼠標(biāo)懸停，動畫暫停的效果
ul:hover {
animation-play-state: paused;
}
6、最后給nav 增加 overflow：hidden 使得超出的部分隱藏，這樣整體一組滾動的圖片欄就做好了
整體代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
img {
width: 250px;
height: 170px;
float: left;
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
<li><img src="Images/1 (2).jpg" alt=""></li>
<li><img src="Images/2 (2).jpg" alt=""></li>
<li><img src="Images/3 (2).jpg" alt=""></li>
</ul>
</nav>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的CSS 實現(xiàn)滾動的圖片欄 實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
DIV+CSS仿百度圖片欄目搜索頁面模板特效源碼是一款仿新版百度圖片欄目搜索頁面模板素材下載。本段特效源碼可以在各大網(wǎng)站使用，有需要的朋友直接下載使用2017-07-21
基于jquery+css3實現(xiàn)的通欄響應(yīng)式圖片輪播動畫特效源碼
基于jquery+css3實現(xiàn)的通欄響應(yīng)式圖片輪播動畫特效源碼是一段實用的產(chǎn)品展示代碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼，需要的朋友們可以前來下載使用2014-10-23- 網(wǎng)頁制作Webjx文章簡介：到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性. 到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下: 圓角 從web2.0開始，開2009-04-02
