CSS 實(shí)現(xiàn)滾動(dòng)的圖片欄 實(shí)例代碼
發(fā)布時(shí)間：2018-09-25 11:06:19 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS 實(shí)現(xiàn)滾動(dòng)的圖片欄 實(shí)例代碼,需要的朋友可以參考下
在一些網(wǎng)站上可以經(jīng)?？吹接幸恍﹫D片進(jìn)行持續(xù)不斷的滾動(dòng)，這個(gè)效果可以通過css的動(dòng)畫效果來實(shí)現(xiàn)。具體效果如下
主要原理是通過動(dòng)畫向左移動(dòng)。
首先給出兩組一樣的圖片（同一行上），讓整體圖片向左移動(dòng)一組圖片的長(zhǎng)度，
這樣在動(dòng)畫結(jié)束時(shí)會(huì)迅速還原到原來位置，而此時(shí)正好與第二組圖片交替，看起來就像是一組圖片在不斷循環(huán)向左滾動(dòng)。
具體步驟如下：
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相同，并指定動(dòng)畫相關(guān)屬性
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
4、定義動(dòng)畫，主要是向左移動(dòng)一組圖片的長(zhǎng)度
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
5、增加鼠標(biāo)懸停，動(dòng)畫暫停的效果
ul:hover {
animation-play-state: paused;
}
6、最后給nav 增加 overflow：hidden 使得超出的部分隱藏，這樣整體一組滾動(dòng)的圖片欄就做好了
整體代碼如下
<!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 實(shí)現(xiàn)滾動(dòng)的圖片欄 實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
DIV+CSS仿百度圖片欄目搜索頁(yè)面模板特效源碼是一款仿新版百度圖片欄目搜索頁(yè)面模板素材下載。本段特效源碼可以在各大網(wǎng)站使用，有需要的朋友直接下載使用2017-07-21
基于jquery+css3實(shí)現(xiàn)的通欄響應(yīng)式圖片輪播動(dòng)畫特效源碼
基于jquery+css3實(shí)現(xiàn)的通欄響應(yīng)式圖片輪播動(dòng)畫特效源碼是一段實(shí)用的產(chǎn)品展示代碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼，需要的朋友們可以前來下載使用2014-10-23- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性. 到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下: 圓角 從web2.0開始，開2009-04-02
