您好,登錄后才能下訂單哦!
這篇“怎么使用CSS實(shí)現(xiàn)滾動(dòng)的圖片欄”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“怎么使用CSS實(shí)現(xiàn)滾動(dòng)的圖片欄”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來(lái)就讓我們進(jìn)入主題吧。
主要原理是通過(guò)動(dòng)畫(huà)向左移動(dòng)。
首先給出兩組一樣的圖片(同一行上),讓整體圖片向左移動(dòng)一組圖片的長(zhǎng)度,
這樣在動(dòng)畫(huà)結(jié)束時(shí)會(huì)迅速還原到原來(lái)位置,而此時(shí)正好與第二組圖片交替,看起來(lái)就像是一組圖片在不斷循環(huán)向左滾動(dòng)。
具體步驟如下:
1、設(shè)置主體代碼各處兩組一樣的圖片
<nav>
<ul>
<li><imgsrc="Images/1(2).jpg"alt=""></li>
<li><imgsrc="Images/2(2).jpg"alt=""></li>
<li><imgsrc="Images/3(2).jpg"alt=""></li>
<li><imgsrc="Images/1(2).jpg"alt=""></li>
<li><imgsrc="Images/2(2).jpg"alt=""></li>
<li><imgsrc="Images/3(2).jpg"alt=""></li>
</ul>
</nav>
2、設(shè)置nav的大小,寬度為一組圖片相加的寬度,高度為圖片的高度。
nav{
width:750px;
height:170px;
border:1pxsolidred;
margin:100pxauto;
}
3、設(shè)置ul大小,寬度為nav的兩倍,高度與nav相同,并指定動(dòng)畫(huà)相關(guān)屬性
ul{
width:200%;
height:100%;
animation:picmove5slinearinfiniteforwards;
}
4、定義動(dòng)畫(huà),主要是向左移動(dòng)一組圖片的長(zhǎng)度
@keyframespicmove{
from{
transform:translate(0);
}
to{
transform:translate(-750px);
}
}
5、增加鼠標(biāo)懸停,動(dòng)畫(huà)暫停的效果
ul:hover{
animation-play-state:paused;
}
6、最后給nav增加overflow:hidden使得超出的部分隱藏,這樣整體一組滾動(dòng)的圖片欄就做好了
整體代碼如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-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:1pxsolidred;
margin:100pxauto;
overflow:hidden;
}
ul{
width:200%;
height:100%;
animation:picmove5slinearinfiniteforwards;
}
@keyframespicmove{
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><imgsrc="Images/1(2).jpg"alt=""></li>
<li><imgsrc="Images/2(2).jpg"alt=""></li>
<li><imgsrc="Images/3(2).jpg"alt=""></li>
<li><imgsrc="Images/1(2).jpg"alt=""></li>
<li><imgsrc="Images/2(2).jpg"alt=""></li>
<li><imgsrc="Images/3(2).jpg"alt=""></li>
</ul>
</nav>
</body>
</html>
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
以上是“怎么使用CSS實(shí)現(xiàn)滾動(dòng)的圖片欄”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。