使用HTML+CSS实现图片滚动效果

之前用js实现过图片切换的效果，今天实现图片滚动的特效，这里不包含图片的切换。

直接上代码：

<div class="loopimg"><ul><li><img src="img/运动/运动 - 21.jpg" height="200px"/></li><li><img src="img/运动/运动 - 32.jpg" height="200px"/></li><li><img src="img/运动/运动 - 51.jpg" height="200px"/></li><li><img src="img/运动/运动 - 75.jpg" height="200px"/></li><li><img src="img/运动/运动 - 77.jpg" height="200px"/></li><li><img src="img/运动/运动 - 95.jpg" height="200px"/></li><li><img src="img/运动/运动 - 96.jpg" height="200px"/></li><li><img src="img/运动/运动 - 21.jpg" height="200px"/></li><li><img src="img/运动/运动 - 32.jpg" height="200px"/></li><li><img src="img/运动/运动 - 51.jpg" height="200px"/></li><li><img src="img/运动/运动 - 75.jpg" height="200px"/></li><li><img src="img/运动/运动 - 77.jpg" height="200px"/></li><li><img src="img/运动/运动 - 95.jpg" height="200px"/></li><li><img src="img/运动/运动 - 96.jpg" height="200px"/></li></ul></div>

这里共嵌套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中动画的各种设置，代码中已经有了注释了最终效果如下。