用animation做无缝匀速滚动

一舍予

已于 2022-04-07 09:10:41 修改

阅读量3.7k

点赞数 1

分类专栏：关于学习、开发中遇到的各种问题的解决方法 CSS VUE 文章标签：前端 css3 css

于 2022-04-02 10:25:29 首次发布

本文链接：https://blog.csdn.net/hsy0827/article/details/123912846

版权

CSS 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

VUE

20 篇文章 1 订阅

订阅专栏

关于学习、开发中遇到的各种问题的解决方法

16 篇文章 1 订阅

订阅专栏

用animation做无缝匀速滚动

原理
应用

原理

在这里插入图片描述

最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样）
在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个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项动画结束后才能停止，如下图
在这里插入图片描述

一舍予

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用animation做无缝匀速滚动

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

扫一扫