CSS实现横向图片滚动播放
以下示例代码拷走即可放到html中即可查看滚动效果:(仅供学习参考),核心代码查看CSS部分
<!doctype html><html><head><meta charset="utf-8"/><meta content="width=device-width,user-scalable=no" name="viewport"></head><style type="text/css">ul li {margin-top: 20px;}h4 {text-align: left;}hr {width: 100%;color: #987cb9;SIZE: 1px}header {text-align: center;background-color: #00b4ff;}footer {text-align: center;background-color: #00b4ff;}* {margin: 0;padding: 0;}#wrap {width: 100%;height: 500px;border: 1px solid #000;position: relative;overflow: hidden;}#list {position: absolute;-webkit-animation: 10s move infinite linear;width: 200%;}#list li {list-style: none;float: left;}@-webkit-keyframes move {0% {left: 0;}100% {left: -500px;}}@keyframes move {0% {left: 0;}100% {left: -500px;}}#wrap:hover #list {-webkit-animation-play-state: paused; /*动画暂停播放*/}</style><body style="background:#f3f3f4;"><header><H2 align="center">CSS实现横向图片滚动播放</H2><HR></header><nav></nav><article><div id="wrap"><ul id="list"><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li><li><img src="/timg?image&quality=80&size=b9999_10000&sec=1585746611159&di=c2b6baae0fa3da1f83abfbb541a442df&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F08%2F24%2F0824154253_45Hay.png"></li></ul></div></article><footer>XXXXXXXXXXXXXXXXXXXXX</footer></body></html>
如果觉得《CSS实现横向图片滚动播放》对你有帮助，请点赞、收藏，并留下你的观点哦！
