css圖片循環(huán)滾動(dòng)怎么實(shí)現(xiàn)

css
小億
216
2023-07-21 13:28:58

要實(shí)現(xiàn)CSS圖片循環(huán)滾動(dòng)，可以使用CSS動(dòng)畫和關(guān)鍵幀（keyframes）來(lái)實(shí)現(xiàn)。以下是一個(gè)基本的實(shí)現(xiàn)示例：

HTML代碼：

<div class="image-slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>

CSS代碼：

.image-slider {
width: 300px;  /* 設(shè)置容器寬度 */
height: 200px;  /* 設(shè)置容器高度 */
overflow: hidden;  /* 隱藏超出容器的內(nèi)容 */
}
.image-slider img {
width: 100%;  /* 圖片寬度填滿容器 */
height: auto;  /* 圖片高度自適應(yīng) */
}
@keyframes slide {
0% { transform: translateX(0); }  /* 初始位置 */
100% { transform: translateX(-100%); }  /* 滾動(dòng)到最后一張圖片位置 */
}
.image-slider img {
animation: slide 5s linear infinite;  /* 使用動(dòng)畫，5秒完成一次循環(huán)滾動(dòng) */
}

這樣，圖片就會(huì)在容器內(nèi)循環(huán)滾動(dòng)顯示。你可以根據(jù)需要調(diào)整容器的寬度、高度和圖片的數(shù)量以及動(dòng)畫的持續(xù)時(shí)間來(lái)實(shí)現(xiàn)不同的效果。

0 踩