用animation做无缝匀速滚动
用animation做无缝匀速滚动
- 原理
- 应用
原理
- 最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样）
- 在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位
position: relative - 粉色和蓝色盒子里放的是一样的东西，通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位
position: absolute。我们就是通过改变它们leftright值来实现滚动效果。
原理代码如下：
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>Documenttitle>
<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项动画结束后才能停止，如下图
