直播軟體搭建，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左右無間隙滾動， 更多內容歡迎關注之後的文章