本文主要是介绍无限移动的风景 css3 动画 鼠标移入暂停，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<style>*{margin:0;padding:0;/* box-sizing: border-box; */}ul{list-style: none;}#nav{width:900px;height:100px;border:2px solid rgb(70, 69, 69);margin:100px auto; overflow: hidden;}#nav ul{animation:moving 5s linear infinite;width:200%; /*怎么模拟动画无线滚动，关键点在这，因为当动画滚动完之后，ul会回到起始位置，如果设置宽度为大盒子的2倍则在视觉上不会出现回到初始位置重新滚动的问题*/}#nav ul li{float:left; }#nav ul li img{ width:100px;height: 100px;}/* 自定义动画 */@keyframes moving{from{transform:translateX(0)}to{transform: translateX(-900px);}}#nav:hover ul{ /*鼠标移入正在运行的动画停止*/animation-play-state:paused ;}
</style><div id="nav"><ul><!-- 将图片复制两份，保证每份图片的宽跟 nav盒子的宽度相同 --><!-- 第一份 --><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><!-- 第二份 --><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li><li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li></ul></div>这篇关于无限移动的风景 css3 动画 鼠标移入暂停的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
