看看图片走马灯动态效果利用CSS怎么实现？

百变鹏仔 3个月前 (09-20) #CSS

文章标签走马灯

图片走马灯动态效果利用css怎么实现？下面本篇文章就来给大家介绍一下使用 css3 animation transform实现图片走马灯效果的方法，希望对大家有所帮助！

由于项目需要实现一个图片的走马灯效果。查看了大部份通用vue的组件库，比较少看到这类组件，就自己手动实现基于css3动画的走马灯效果。马上想到两个方案，一个是通过定时器、scrollLeft或者修改定位position中的left属性值，另外个方案是通过css3的transform和animation。

选择用动画实现，由于js实现的动画运行在CPU，css3的动画运行在GPU，css3渲染成本低，最后决定用css3去实现这类操作。

使用scrollLeft

一开始使用scrollLeft+overflow实现效果，用到了定时器去触发，然后每次都会导致重绘和回流。（ps：如果需要更好提高性能，可以使用requestAnimationFrame去代替定时器触发，主要优点是requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧）

(更改scrollLeft与left效果一样)核心代码：

立即学习“前端免费学习笔记（深入）”；

function toScrollLeft(){  //  如果容器的宽度大于滚动条距离，则重复滚动  if(divWidth > box.scrollLeft){    box.scrollLeft++    setTimeout(&#39;toScrollLeft()&#39;, 18);  }  else{    // 滚动结束，从新开始    box.scrollLeft=0;    setTimeout(&#39;toScrollLeft()&#39;, 18);  }}

使用 css3 animation transform

使用css3动画实现走马灯，用css变量来动态设置每个状态transform的translateX偏移量，以及最关键的animation,实现部分效果如下制作的gif。

1. 初步设置html布局，设置一个div容器

<div class="box" >    <ul >        <li v-for="(src,i) in cap " :key="i">            @@##@@        </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="{&#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(&#39;https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png&#39;)}

@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怎么实现？

使用scrollLeft

使用 css3 animation transform

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写