圖片走馬燈動態效果利用CSS怎麼實現？以下這篇文章就來跟大家介紹一下使用 css3 animation transform來實現圖片走馬燈效果的方法，希望對大家有幫助！
由於專案需要實現一個圖片的走馬燈效果。查看了大部份通用vue的元件庫，比較少看到這類元件，就自己手動實現基於css3動畫的走馬燈效果。馬上想到兩個方案，一個是透過定時器、scrollLeft或是修改定位position中的left屬性值，另一個方案是透過css3的transform和animation。
選擇用動畫實現，由於js實現的動畫運行在CPU，css3的動畫運行在GPU，css3渲染成本低，最後決定用css3去實現這類操作。
一開始使用scrollLeft overflow實現效果，用到了定時器去觸發，然後每次都會導致重繪和回流。 （ps：如果需要更好提高效能，可以使用requestAnimationFrame去代替定時器觸發，主要優點是requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，並且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀）
#(更改scrollLeft與left效果一樣)核心代碼：
function toScrollLeft(){
// 如果容器的宽度大于滚动条距离，则重复滚动
if(divWidth > box.scrollLeft){
box.scrollLeft++
setTimeout('toScrollLeft()', 18);
}
else{
// 滚动结束，从新开始
box.scrollLeft=0;
setTimeout('toScrollLeft()', 18);
}
}使用css3動畫實作走馬燈，用css變數動態設定每個狀態transform的translateX偏移量，以及最關鍵的animation,實現部分效果如下製作的gif。
1. 初步設定html佈局，設定一個div容器
2. 設定對應的樣式
.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}3. 最後設定綁定物件到style上，在.box元素的style上主要是使用了css 變量，然後透過具體值去動態設定動畫每個狀態的效果。關鍵程式碼使用了animation：cap.length*8 's move infinite linear; 就會出現無限重複移動的效果。
ps:整體主要操作點就是這樣，其他細節的就省略了
data(){
cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')
}@keyframes move {
0%{
transform:translateX(var(--card-ul-width-start))
}
30%{
transform:translateX(var(--card-ul-width-middle1))
}
70%{
transform:translateX(var(--card-ul-width-middle2))
}
100%{
transform:translateX(var(--card-ul-width-end))
}
}（學習影片分享：css影片教學）
以上是看看圖片走馬燈動態效果利用CSS怎麼實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
