使用HTML+CSS实现图片滚动效果
之前用js实现过图片切换的效果,今天实现图片滚动的特效,这里不包含图片的切换。 直接上代码:
这里共嵌套3层。div-ul-li,动画效果放在ul中,li样式使用float-left,使图片水平排列。一共有7张图片,重复一遍,也就是一共有14张图片。
.loopimg{
width: 4173px;
height: 200px;
margin: 0px auto;
padding: 0px;
overflow: hidden;
}
.loopimg > ul{
width: 100%;
/*动画名称*/
animation-name: move;
/*动画时间*/
animation-duration: 15s;
/*动画次数*/
animation-iteration-count: infinite;
/*匀速*/
animation-timing-function: linear;
}
.loopimg > ul > li{
float: left;
list-style: none;
}
#foot{
border: 1px solid black;
height: 80px;
width: 100%;
text-align: center;
}
@keyframes move {
/*动画起始位置*/
0%{
transform: translateX(0px);
}
/*动画结束状态*/
100%{
transform: translateX(-2086.24px);
}
}
其中DIV为放图片的容器,设置为overflow:hidden,也就是超过的部分忽略。 div的宽度就设置为页面中的宽度,ul的宽度设置为所有图片的宽度之和,li样式为none,向左浮动。 接下来是动画设置:@keyframes move,2086.24是7张图片的宽度,也就是ul从像素0移动到像素-2048.24。也就是一次动画滚动7张图片,我放14张是为了不显示空白。至于ul中动画的各种设置,代码中已经有了注释了最终效果如下。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229170924653.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTk1MTM4,size_16,color_FFFFFF,t_70)
|