无限移动的风景 css3 动画 鼠标移入暂停

css 复制代码
<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>
html 复制代码
<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>
相关推荐
xcLeigh5 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
今天你有学习吗16 小时前
解决canvas绘图模糊问题
javascript·css·css3
ZhaiMou21 小时前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
荆州克莱1 天前
Redis | Redis常用命令及示例总结(API)
spring boot·spring·spring cloud·css3·技术
Justinc.2 天前
CSS3_动画(九)
前端·css·css3
暗夜绿2 天前
【CSS3】Flex弹性布局
前端·css·css3·flex·弹性布局
y先森2 天前
css3中的多列布局,用于实现文字像报纸一样的布局
前端·css3
懒羊羊我小弟2 天前
CSS回顾-CSS选择器详解
前端·css·html·css3·html5
逸曦穆泽2 天前
html5 实现视频播放
前端·音视频·html5
xcLeigh2 天前
HTML5实现剪刀石头布小游戏(附源码)
前端·html·html5