直播软件搭建，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左右无间隙滚动， 更多内容欢迎关注之后的文章