原理

最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样）
在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位 position: relative
粉色和蓝色盒子里放的是一样的东西，通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位 position: absolute 。我们就是通过改变它们left right 值来实现滚动效果。

原理代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes run-left-a {from {left: 0;}to {left: -50%;}}@keyframes run-left-b {from {right: 0;}to {right: 50%;}}.visible {width: 300px;height: 200px;border: 3px solid #000;margin: 0 auto;}.box {position: relative;width: 800px;}.a,.b {position: absolute;width: 400px;height: 200px;background-color: pink;}.a {animation: run-left-a 1s linear infinite backwards;}.b {background-color: skyblue;animation: run-left-b 1s linear infinite backwards;}</style>
</head>
<body><div class="visible"><div class="box"><div class="a"></div><div class="b"></div></div></div>
</body>
</html>

应用

明白了原理后，就可以运用的开发中了。

如图所示的例子中，分别弄了上下两列，这两列盒子中的的东西是一样的，只不过动画的方向是相反的。

如果需要添加鼠标悬停暂停动画、鼠标离开继续动画的的效果，需要在鼠标悬停的时候给盒子中实际动画的盒子（也就是原理中的粉蓝盒子）添加一个stop类名，鼠标离开移除stop类名。（注意：只要鼠标悬停，就要同时给该滚动列中两个实际动画的盒子都添加stop类，鼠标离开同理） stop类样式如下。

.stop {animation-play-state: paused;
}

vue中实现参考代码如下：

<template><div style="padding-top:60px;"class="box"><div class="first"><div class="father"><ul class="animate_list clearfix a":class="{'stop' : oneFlag}"@mouseover="oneFlag=true"@mouseout="oneFlag=false"><li v-for="item in imgList":key=" 1 + item.id"class="swiper-slide"><img :src="item.url"alt=""></li></ul><ul class="animate_list clearfix b":class="{'stop' : oneFlag}"@mouseover="oneFlag=true"@mouseout="oneFlag=false"><li v-for="item in imgList":key=" 1 + item.id"class="swiper-slide"><img :src="item.url"alt=""></li></ul></div></div><div class="second"><div class="father"><ul class="animate_list clearfix c":class="{'stop' : twoFlag}"@mouseover="twoFlag=true"@mouseout="twoFlag=false"><li v-for="item in imgList":key=" 1 + item.id"class="swiper-slide"><img :src="item.url"alt=""></li></ul><ul class="animate_list clearfix d":class="{'stop' : twoFlag}"@mouseover="twoFlag=true"@mouseout="twoFlag=false">><li v-for="item in imgList":key=" 1 + item.id"class="swiper-slide"><img :src="item.url"alt=""></li></ul></div></div></div>
</template><script>
export default {data () {return {oneFlag: false,twoFlag: false,imgList: [{id: 1,url: require('../../assets/img/04.png')},{id: 2,url: require('../../assets/img/05.png')},{id: 3,url: require('../../assets/img/06.png')},{id: 4,url: require('../../assets/img/07.png')},{id: 5,url: require('../../assets/img/08.png')},{id: 6,url: require('../../assets/img/09.png')},{id: 7,url: require('../../assets/img/04.png')},{id: 8,url: require('../../assets/img/05.png')},{id: 9,url: require('../../assets/img/06.png')},{id: 10,url: require('../../assets/img/07.png')},{id: 11,url: require('../../assets/img/08.png')},{id: 12,url: require('../../assets/img/09.png')}]}}
}
</script><style>
@keyframes run-left-a {from {left: 0;}to {left: -50%;}
}
@keyframes run-left-b {from {right: 0;}to {right: 50%;}
}
@keyframes run-right-c {from {left: -50%;}to {left: 0;}
}
@keyframes run-right-d {from {right: 50%;}to {right: 0;}
}
.box {/* overflow: hidden; */max-width: 1920px;min-width: 1730px;margin: auto;text-align: left;
}
.first,
.second {width: 100%;height: 299px;/* overflow: hidden; */
}
.second {margin-bottom: 35px;
}
.father {width: 7176px;position: relative;
}
.animate_list {width: 3588px;
}
.animate_list li {float: left;width: 264px;height: 264px;margin: 35px 35px 0 0;border-radius: 8px;overflow: hidden;
}
.animate_list li img {width: 100%;height: 100%;
}
.a {position: absolute;animation: run-left-a 25s linear infinite backwards;
}
.b {position: absolute;animation: run-left-b 25s linear infinite backwards;
}
.c {position: absolute;animation: run-left-c 25s linear infinite backwards;
}
.d {position: absolute;animation: run-left-d 25s linear infinite backwards;
}
.stop {animation-play-state: paused;
}
</style>

这里提一嘴，一开始我想用swiper来实现这个效果，但在鼠标悬停停止滚动的时候会有问题，我找不到很好的解决办法。swiper滚动的时候是以一块一块slide项作为单位，悬停停止动画也只能在当前滚动的slide项动画结束后才能停止，如下图

用animation做无缝匀速滚动相关推荐

基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
css3 animation 箭头向右滚动渐隐
这是一个右箭头的小图标. keyframes 创建一个css3动画用 animation 调用并用延迟动画的办法做出匀速滚动的效果. 直接贴上html代码,复制即可运行. <!DOCTYPE ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
jQuery无缝向上滚动效果
该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果,废话不多说,直接上代码 (1)向上滚动 HTML: <div id="demo" style=" ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...

用animation做无缝匀速滚动

用animation做无缝匀速滚动

原理

应用

用animation做无缝匀速滚动相关推荐

最新文章

热门文章