色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css圖片滾動(dòng)代碼素材

林子帆1年前8瀏覽0評論

CSS圖片滾動(dòng)代碼素材,讓您的網(wǎng)站更加生動(dòng)、豐富、美麗,讓訪問者快速掌握您的網(wǎng)站內(nèi)容,提高用戶黏性。下面將為您介紹其中的CSS代碼。

.scroll-box {
width: 100%; /*容器寬度*/ 
height: 300px; /*容器高度*/
overflow: hidden; /*超出寬高部分隱藏*/ 
position: relative; /*相對定位*/
}
.scroll-list {
/*圖片寬高*/
width: 100%; 
height: 300px; 
position: absolute; 
top: 0; 
left: 0;
font-size: 0; /*去掉默認(rèn)字體大小*/ 
animation: scroll-x 20s linear infinite; /*動(dòng)畫調(diào)用*/ 
}
.scroll-list:hover {
/*鼠標(biāo)放在圖片上時(shí)停止動(dòng)畫*/
animation-play-state: paused; 
cursor: pointer; 
}
.scroll-list img {
/*每個(gè)圖片的寬高*/
width: 33.33%; 
height: 300px; 
display: inline-block; /*行內(nèi)塊顯示*/ 
}
/*CSS動(dòng)畫*/
@keyframes scroll-x {
0% { 
left: 0; /*初始位置*/ 
}
100% { 
left: -200%; /*移動(dòng)距離*/ 
} 
}

以上代碼是一個(gè)基礎(chǔ)的CSS圖片滾動(dòng)代碼素材。要使用這個(gè)代碼,您只需要在HTML文件中添加相關(guān)容器和圖片鏈接,即可達(dá)到滾動(dòng)效果。

希望這個(gè)CSS圖片滾動(dòng)代碼素材能夠幫助到您,讓您的網(wǎng)站更加生動(dòng)多姿。