直播软件搭建，css实现多张图片或logo左右无间隙滚动

直播软件搭建，css实现多张图片或logo左右无间隙滚动

 

<style>
/* 在需要的父盒子添加使用滚动动画 */
.box1{
width:90vh;
height:100px;
animation: move 20s linear infinite;
}
.box1{
width:90vh;
height:100px;
animation: move2 20s linear infinite;
}
/*图片元素向右滚动*/
@keyframes move {
    0% {
    }
    100% {
      transform: translateX(-50%);
      /* 可以把这里改为translateY 实现上下滚动*/
    }
  }
/*
图片向左滚动:
*/
@keyframes move2 {
    0% {
        transform: translateX(calc(-100% + 100vw))
    }
    100% {
        transform: translateX(calc(-66.6% + 100vw))
    }
  }
</style>
// html 代码结构如
<div class="box1">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
</div>
<div class="box2">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
<img src="logo1.png" alt="">
</div>
<script type="text/javascript">
// 为了实现无间隙滚动 需要利用js 复制一遍滚动元素，
window.onload=function(){
 // 动画
$(".box1").each(function() {
var rows = $(this).children().clone();
$(this).append(rows);
});
$(".box2").each(function() {
// console.log($(this));
var rows = $(this).children().clone();
$(this).append(rows);
});
};
 </script>

​

以上就是直播软件搭建，css实现多张图片或logo左右无间隙滚动， 更多内容欢迎关注之后的文章