css实现无缝滚动
//mymoves 变量名 可以以自己定义
//form 从那边来 to到哪去
//from 下的 left 为 负值 那么就是 从左向右滚动
//from 下的left 为正值 那么就是 从右向左滚动
//from 下的top 为正值 那么就是 从上向下滚动
//from 下的top 为负值值 那么就是 从下向上滚动
@-webkit-keyframes mymoves {
from {
left:-546px;
}
to {
left:0px;
}
}
.tops{
overflow:hidden;
width:340px;
height:137px;
margin-top: 20px;
div{
position:relative;
top:0px;
left:0px;
width:2103px;
height:200%;
animation:mymoves 10s infinite linear;
}
img {
width: 102px;
height: 137px;
margin-left: 7px;
float:left;
vertical-align:middle;
}
}
基本逻辑就是
tops 设置为可见区域
tops >div :是轮播图的总长度 这个计算方法
就是{
你有10张照片 宽为10