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

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

 

1

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

​

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