如何使用CSS實(shí)現(xiàn)圖片走馬燈動(dòng)態(tài)效果

小編給大家分享一下如何使用CSS實(shí)現(xiàn)圖片走馬燈動(dòng)態(tài)效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

選擇用動(dòng)畫(huà)實(shí)現(xiàn)，由于js實(shí)現(xiàn)的動(dòng)畫(huà)運(yùn)行在CPU，css3的動(dòng)畫(huà)運(yùn)行在GPU，css3渲染成本低，最后決定用css3去實(shí)現(xiàn)這類(lèi)操作。

使用scrollLeft

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

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

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

使用 css3 animation transform

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

1. 初步設(shè)置html布局，設(shè)置一個(gè)div容器

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img width="90px" height="90px" :src="src" />
        </li>
    </ul>
</div>

2. 設(shè)置對(duì)應(yīng)的樣式

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

3. 最后設(shè)置綁定對(duì)象到style上，在.box元素的style上主要是使用了css 變量，然后通過(guò)具體值去動(dòng)態(tài)設(shè)置動(dòng)畫(huà)每個(gè)狀態(tài)的效果。關(guān)鍵代碼使用了animation：cap.length*8+ 's move infinite linear; 就會(huì)出現(xiàn)無(wú)限重復(fù)移動(dòng)的效果。

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

<div class="box" :style="{
'--card-ul-width-start':-30+'px',
'--card-ul-width-middle1':-cap.length*30+'px', 
'--card-ul-width-middle2':-cap.length*60+'px',
'--card-ul-width-end':-cap.length*90+'px'
}">
    <ul :style="{'-webkit-animation':cap.length*8+ 's move infinite linear;'}">
        <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))
    }    
}

看完了這篇文章，相信你對(duì)“如何使用CSS實(shí)現(xiàn)圖片走馬燈動(dòng)態(tài)效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！