纯css实现左右无缝滚动的动画，高手实现，进阶必看，拿来即用，拿来测试，废话不说，直接上代码

最新推荐文章于 2023-06-02 16:42:30 发布

网站开发者

最新推荐文章于 2023-06-02 16:42:30 发布

阅读量1.3k

点赞数 3

分类专栏：前端 html js 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/mengzhanfei1/article/details/122238283

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<style>
    @keyframes dh {
        from{
            margin-left: 0;
        }
        to{
            margin-left: -150%;
        }
    }
    #dh{
        display: flex;overflow: hidden;
    }
    #dh div{
        flex: none;width: 50%;height: 200px;text-align: center;font-size: 50px;background: #eeeeee;
    }
    /*大屏*/
    #dh div:nth-child(1){
        animation:dh 20s linear infinite;
    }
    #dh:hover div:nth-child(1){
        animation-play-state: paused;
    }
    /*中屏*/
    @media (max-width: 1500px) {
        #dh div:nth-child(1){
           animation-duration: 10s;
        }
    }
    /*小屏*/
    @media (max-width: 600px) {
        #dh div:nth-child(1){
            animation-duration: 5s;
        }
    }
</style>
<div id="dh">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>