无缝滚动(纯css+html)
无缝滚动是动画的一个基础运用,也常用,简单分享下。
代码部分
/*首先需要一个小构思,整体框架我选用的是 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>
注意:将图片分为两组,每组的总宽度正好是一个盒子的总宽度。
原因是:一组图片当然可以实现动画的滚动效果,但是在这一组图片均完全实现平行移动距离后,会循环回原地再次进行循环滚动,但是在这个循环的交界处会出现空白与停顿,显得不够流畅;
所以可以在这一组图片的后面同样设置一组相同图片,只是就需要设置ul 标签的宽度为原来盒子宽度的两倍,设置为200%即可,这样就可以实现无缝衔接了。
结尾
不足之处,还请斧正!