图片走马灯动态效果利用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中文网其他相关文章!