纯css实现无缝轮播，粘贴既可使用

最新推荐文章于 2024-07-01 23:54:45 发布

我的小本本

最新推荐文章于 2024-07-01 23:54:45 发布

阅读量168

点赞数 1

文章标签： css 前端 java

本文链接：https://blog.csdn.net/m0_59213774/article/details/139503669

版权

rem根据根元素计算，可以自行更换单位（ 1rem = 16px ）

    <div class="qualification">
      <div class="title">荣誉资质</div>
      <div class="auto-carousel">
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
        <img class="scroll-box-item"></img>
      </div>
    </div>

css部分

  /* 针对Webkit内核的浏览器 */
    .auto-carousel::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条 */
    }

    /* 通用 */
    .auto-carousel {
        -ms-overflow-style: none;
        /* IE和Edge */
        overflow: -moz-scrollbars-none;
        /* 旧版Firefox */
        overflow: auto;
        /* 启用滚动 */
    }

    /* 对于Firefox 64及以上版本 */
    .auto-carousel {
        scrollbar-width: none;
        /* 隐藏滚动条 */
        margin: 0 auto;
        width: 80rem;
        height: 20rem;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        background-color: pink;
        overflow-x: auto;

        &:hover .scroll-box-item {
            animation-play-state: paused;
        }

        @keyframes scroll {
            0% {
                -webkit-transform: translateX(0);
                /* Safari 和 Chrome */
                transform: translateX(0);
                /* 其他浏览器 */
            }

            100% {
                -webkit-transform: translateX(calc(-120px * 10));
                /* Safari 和 Chrome */
                transform: translateX(calc(-22rem * 5));
                /* 其他浏览器 */
            }
        }

        .scroll-box-item {
            box-sizing: border-box;
            margin-top: 3.8rem;
            width: 20rem;
            height: 14.25rem;
            border: 2px solid white;
            display: inline-block;
            margin-right: 2rem;
            animation: scroll 10s linear infinite;

            .scroll-box-item-img {
                width: 15rem;
                height: 10rem;
                border-radius: .5rem;
                display: inline-block;
                cursor: pointer;
            }

        }
    }