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)多姿。