利用background实现循环滚动同一张图片

最新推荐文章于 2022-09-16 11:11:21 发布

smallsnine

最新推荐文章于 2022-09-16 11:11:21 发布

阅读量1.6k

点赞数

分类专栏： css 文章标签： background-size 循环滚动同一张图片 keyframes 0 0 / contain css

本文链接：https://blog.csdn.net/smallsnine/article/details/82753512

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用background实现循环滚动同一张图片

<template>
  <div class="turn_line">
   <div class="line line_one" ></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>
<style scoped>
.line{
  background: url('https://fes.qyerstatic.com/FsoLpE6N361kPpEh12r_hTW1I72p')  0 0 / contain;
  height: 50rem;
  width: 1%;
  left: 50%;
  position: absolute;
  bottom: 0rem;
  transform: translateX(-50%);
  animation: lines 1s linear infinite
}
.turn_line{
  height: 100%;
  background: black;
  overflow: hidden
}
@keyframes lines {
  0%{
    background-position-y: 0rem
  }   
  to{
    background-position-y: -50rem
  }   
}
</style>

利用background的重复背景图片的属性实现此功能，首先使图片填充整个背景，可以重复 (contain)
定位 0 0
/ ：如果同时设置了“position”和“size”两个属性，应该用左斜杠“/”，而不是用空格把两个参数值隔开：“position/size”。
添加动画，改变背景图片的y轴的定位。
在这里插入图片描述
注意：
1.在移动端使用background-position会有点卡顿（偶尔），因为它循环的时候需要重绘整张图
2.背景图片只能紧挨着，我并不知道怎么使背景图片重复间有个间距，所以造成两张图斑马线白线没有间隔，上下图片可能会有一点问题，不过这点可以通过设计图更改修正掉（如果有更好的方法麻烦告诉我，感谢）