直播軟體搭建,css實現多張圖片或logo左右無間隙滾動

zhibo系統開發 發表於 2022-06-14
CSS

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2900461/,如需轉載,請註明出處,否則將追究法律責任。