Seamless scrolling (pure css+html)
Seamless scrolling is a basic application of animation, and it is also commonly used. Simply share it.
Code part
/*首先需要一个小构思，整体框架我选用的是 ui li标签*/
<style>
*{
margin: 0; /*习惯上首先清楚边距*/
padding: 0;
}
.main{
width:500px; /*对外部大盒子的一个定义*/
height:200px;
background-color: #000000; /*背景设置*/
margin:300px; /*根据情况调整距离*/
overflow: hidden; /*作用为和盒子外的图片隐藏不显示（与display：none有本质区别）*/
}
.main ul{
list-style: none; /*作用为清楚表单前的小浮点*/
width:200%; /*使ul长度为一组图片的两倍，使之可存放两组图片，是实现无限滚动的关键*/
animation: go 15s linear infinite; /* 对动画的命名 周期设置 速度运动曲线 以及循环次数*/
}
.main li{
float:left; /* 使表单列浮动为一行，排列于盒子中*/
}
@keyframes go{
from{
transform: translateX(0);} /*动画定义：作用为使图片进行水平距离的进行运动 （距离自定义）*/
to{
transform: translateX(-500px);}
}
.main:hover ul{
animation-play-state: paused; /*作用为使鼠标移到ul标签上时，动画停止播放*/
}
</style>
</head>
<body>
<div class="main">
<ul>
/* 图片的宽度与长度随着自己盒子设置的大小自定义*/
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
/* --------------我是可爱的分界线--将图片分为两组------------------*/
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
</ul>
</div>
</body>
Note : Divide the picture into two groups, and the total width of each group is exactly the total width of a box.
The reason is: of course, a group of pictures can achieve the scrolling effect of animation, but after this group of pictures have fully realized the parallel movement distance, they will loop back to the original place and perform looping again, but there will be blanks and pauses at the junction of this loop , Seems not smooth enough ;
so you can also set a group of the same pictures behind this group of pictures, but you need to set the width of the ul label to twice the width of the original box, and set it to 200%, so that seamlessness can be achieved Connected.
end
不足之处，还请斧正！