扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下如何使用CSS实现图片走马灯动态效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
我们提供的服务有：网站制作、网站建设、微信公众号开发、网站优化、网站认证、塔河ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的塔河网站制作公司
由于项目需要实现一个图片的走马灯效果。查看了大部份通用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容器