无限移动的风景 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>
相关推荐
涔溪11 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang16 小时前
前端如何实现电子签名
前端·javascript·html5
veminhe21 小时前
html怎么设置html5
html·html5
失落的多巴胺1 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
哎呦你好2 天前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
veminhe11 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说12 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe13 天前
HTML5简介
前端·html·html5
路光.15 天前
加载动画
css·html·css3
年纪轻轻就扛不住15 天前
css3 文本效果(text-shadow、text-overflow、word-wrap、word-break)文本阴影、文本换行、文本溢出并隐藏显示省略号
前端·word·css3