CSS3_图片连续无缝滚动 - 好文

效果图：

传不上来。。。

在线预览地址：地址 <http://jsbin.com/zozulemijo/edit?html,output>

代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片滚动</title> <meta
name="keywords" content=""> <meta name="description" content=""> <style>
*{padding: 0;margin: 0;} .out{ width: 900px; height: 300px; margin: 20px auto;
overflow: hidden; text-align: center; } .con{ width: 3300px; height: 300px;
overflow: hidden; animation: move 8s linear infinite normal;
animation-fill-mode:forwards; } .con:hover{ animation-play-state:paused;
-webkit-animation-play-state:paused; } @keyframes move{
0%{transform:translateX(0px);} 100%{transform:translateX(-2400px);} } .con li{
float: left; list-style: none; overflow: hidden; } .con img{ float: left;
width: 300px; height: 300px; } .pause{ position: relative; height: 60px;
display: inline-block; margin: 20px auto; text-align: center; } .pause:before{
position: absolute; content: "Pause"; display: inline-block; width: 100px;
height: 60px; left: 0px; line-height: 60px; font-size: 20px; color: #fff;
margin: 0 20px; background: #6293d3; border: none; border-radius: 20px;
outline: none; } .out input{ display: none; } .out input:checked ~ .con{
animation-play-state:paused; -webkit-animation-play-state:paused; } .out
input:checked ~ .pause:before{ content: "Start"; } </style> </head> <body> <div
class="out"> <input id="ipt1" type="checkbox" name="" value=""> <label
for="ipt1" class="pause"> </label> <ul class="con"> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515297&di=39e7b6a09eb64717364e69ac579de339&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eeef490028befb43166d22df3c.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=0eaccd9930036823ec3df5cb9c7094d0&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb219ebc4b74543a96a58c53112178a82b801148f.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515296&di=8e001573a25c2ab547dd864b627ef9ce&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc8ea15ce36d3d539433a63213687e950342ab0c9.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=594c0cff7730153188615749b6f552aa&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F960a304e251f95cacc952852c5177f3e660952f5.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515295&di=0ac3110ebb1af9e59d187ee6b674fb71&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889462125&di=7c906a8c0dcc2a845c7d28a201318752&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889488116&di=21ae4bf7271789353831cdaacdb06a07&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9358d109b3de9c821370156d6081800a19d8433f.jpg"
alt=""></li> <li><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531889515298&di=a58343b0c4bcc997236124fbf15c31be&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F738b4710b912c8fc505ae929f0039245d78821ac.jpg"
alt=""></li> </ul> </div> </body> </html>
参考的菜鸟教程的：

http://www.runoob.com/try/try.php?filename=trycss3_animation3
<http://www.runoob.com/try/try.php?filename=trycss3_animation3>

<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title> <style> div { width:100px; height:100px;
background:red; position:relative; animation:myfirst 5s;
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */ } @keyframes
myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow;
left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75%
{background:green; left:0px; top:200px;} 100% {background:red; left:0px;
top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0%
{background:red; left:0px; top:0px;} 25% {background:yellow; left:200px;
top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green;
left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style>
</head> <body> <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div> </body> </html>

热门工具换一换