CSS怎样实现滚动的图片栏

这篇文章给大家分享的是有关CSS怎样实现滚动的图片栏的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
主要原理是通过动画向左移动。
首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，
这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。
具体步骤如下：
1、设置主体代码各处两组一样的图片

免费云主机、域名
2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。
nav{
width:750px;
height:170px;
border:1pxsolidred;
margin:100pxauto;
}
3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性
ul{
width:200%;
height:100%;
animation:picmove5slinearinfiniteforwards;
}
4、定义动画，主要是向左移动一组图片的长度
@keyframespicmove{
from{
transform:translate(0);
}
to{
transform:translate(-750px);
}
}
5、增加鼠标悬停，动画暂停的效果
ul:hover{
animation-play-state:paused;
}
6、最后给nav增加overflow：hidden使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了
整体代码如下

*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
nav{
width:750px;
height:170px;
border:1pxsolidred;
margin:100pxauto;
overflow:hidden;
}
ul{
width:200%;
height:100%;
animation:picmove5slinearinfiniteforwards;
}
@keyframespicmove{
from{
transform:translate(0);
}
to{
transform:translate(-750px);
}
}
img{
width:250px;
height:170px;
float:left;
}
ul:hover{
animation-play-state:paused;
}

相关推荐: Node.js怎么去除图片水印

这篇文章主要介绍“Node.js怎么去除图片水印”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Node.js怎么去除图片水印”文章能帮助大家解决问题。 一、了解Node.jsNode.js是一个基于Chrome V8引…