圖片走馬燈動態(tài)效果利用CSS怎么實現(xiàn)？下面本篇文章就來給大家介紹一下使用 css3 animation transform實現(xiàn)圖片走馬燈效果的方法，希望對大家有所幫助！

由于項目需要實現(xiàn)一個圖片的走馬燈效果。查看了大部份通用vue的組件庫，比較少看到這類組件，就自己手動實現(xiàn)基于css3動畫的走馬燈效果。馬上想到兩個方案，一個是通過定時器、scrollLeft或者修改定位position中的left屬性值，另外個方案是通過css3的transform和animation。

選擇用動畫實現(xiàn)，由于js實現(xiàn)的動畫運行在CPU，css3的動畫運行在GPU，css3渲染成本低，最后決定用css3去實現(xiàn)這類操作。

使用scrollLeft

一開始使用scrollLeft overflow實現(xiàn)效果，用到了定時器去觸發(fā)，然后每次都會導致重繪和回流。（ps：如果需要更好提高性能，可以使用requestAnimationFrame去代替定時器觸發(fā)，主要優(yōu)點是requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀）

(更改scrollLeft與left效果一樣)核心代碼：

function toScrollLeft(){
  //  如果容器的寬度大于滾動條距離，則重復滾動
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滾動結束，從新開始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

使用 css3 animation transform

使用css3動畫實現(xiàn)走馬燈，用css變量來動態(tài)設置每個狀態(tài)transform的translateX偏移量，以及最關鍵的animation,實現(xiàn)部分效果如下制作的gif。

1. 初步設置html布局，設置一個div容器

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img  src="/static/imghw/default1.png"  data-src="src"  class="lazy"     style="max-width:90%" height="90px" : / alt="看看圖片走馬燈動態(tài)效果利用CSS怎么實現(xiàn)？" >
        </li>
    </ul>
</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 變量，然后通過具體值去動態(tài)設置動畫每個狀態(tài)的效果。關鍵代碼使用了animation：cap.length*8 's move infinite linear; 就會出現(xiàn)無限重復移動的效果。

ps:整體主要操作點就是這樣，其他細節(jié)的就省略了

<div class="box" :style="{
&#39;--card-ul-width-start&#39;:-30+&#39;px&#39;,
&#39;--card-ul-width-middle1&#39;:-cap.length*30+&#39;px&#39;, 
&#39;--card-ul-width-middle2&#39;:-cap.length*60+&#39;px&#39;,
&#39;--card-ul-width-end&#39;:-cap.length*90+&#39;px&#39;
}">
    <ul :style="{&#39;-webkit-animation&#39;:cap.length*8+ &#39;s move infinite linear;&#39;}">
        <li></li>
    </ul>
</div>

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視頻教程）

以上是看看圖片走馬燈動態(tài)效果利用CSS怎么實現(xiàn)？的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！