CSS動畫走馬燈是一種非常酷炫的網頁元素,它可以展示出各種各樣的效果,讓網頁更加生動,吸引人們的眼球。
/* HTML結構 */ <div class="carousel"> <ul class="carousel_list"> <li>第一張圖片</li> <li>第二張圖片</li> <li>第三張圖片</li> <li>第四張圖片</li> </ul> </div> /* CSS樣式 */ .carousel { width: 500px; height: 300px; overflow: hidden; /*隱藏超出部分*/ } .carousel_list { display: flex; /*使用Flexbox布局,實現橫向排列*/ width: 200%; /*寬度為原長度的兩倍*/ animation: carouselAnim 10s infinite linear; /*使用動畫效果*/ } .carousel_list li { flex: 1; /*每個圖片占據平均空間*/ } /* 動畫效果 */ @keyframes carouselAnim { 0% {transform: translateX(0);} /*開始時,圖片在原位置*/ 100% {transform: translateX(-50%);} /*結束時,圖片左移50%*/ }
以上就是CSS動畫走馬燈的基本使用方法,可以根據實際需要進行調整。需要注意的是,走馬燈的實現需要注意性能問題,尤其是對于移動端設備,更需要精細優化,避免出現卡頓、掉幀等情況。
上一篇$form vue