圖片走馬燈動態效果利用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容器
<div class="box" > <ul > <li v-for="(src,i) in cap " :key="i"> <img style="max-width:90%" height="90px" :src="src" / alt="看看圖片走馬燈動態效果利用CSS怎麼實現?" > </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 變量,然後透過具體值去動態設定動畫每個狀態的效果。關鍵程式碼使用了animation:cap.length*8 's move infinite linear; 就會出現無限重複移動的效果。
ps:整體主要操作點就是這樣,其他細節的就省略了
<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)) } }
(學習影片分享:css影片教學)
以上是看看圖片走馬燈動態效果利用CSS怎麼實現?的詳細內容。更多資訊請關注PHP中文網其他相關文章!