css 无缝轮博

最新推荐文章于 2024-06-13 09:45:33 发布

eve Yu

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量110

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43057892/article/details/137349009

版权

<div class="umx-ul-box">
    <ul class="umx-ul1">
        <li>
            <figure class="umx-icon1 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon2 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon3 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon4 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon5 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon6 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon7 lazy-imageom"></figure>
        </li>
    </ul>
    <ul class="umx-ul2">
        <li>
            <figure class="umx-icon1 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon2 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon3 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon4 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon5 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon6 lazy-imageom"></figure>
        </li>
        <li>
            <figure class="umx-icon7 lazy-imageom"></figure>
        </li>
    </ul>
</div>

@keyframes carousel {
    0% {
      transform: translateX(100%);
    }
    50% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
}

@keyframes carousel-2 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(-200%);
    }
}

.umx-ul-box {
    overflow: hidden;
    display: flex;
    width: 70*7+20*7px;
    @include make-attributes-custom(md, ()){
        width: (70*7)*.75+20*7px;
    }
    @include make-attributes-custom($xs-node, ()){
        width: calc(100vw - 48px);
    }
}

ul {
    position: relative;
    display: flex;

    &.umx-ul1 {
        animation: carousel 10s linear infinite; 
    }
    &.umx-ul2 {
        animation: carousel-2 10s 5s linear infinite; 
    }

    li {
        position: relative;
        margin-right: 20px;
        @include make-attributes-custom($xs-node, ()){
            margin-right: vw2px(10);
        }
        figure {
            border-radius: 12px;
            @include make-attributes-custom($xs-node, ()){
                border-radius: 6px;
            }
            @for $i from 1 through 7 {
                &.umx-icon#{$i} {
                    @include make-backgroundimage-custom(lg, (name: 'chip-icon#{$i}-lg', extname: 'png', width: 70, height: 70, rate: 1, nocenter: true, webp: true));
                    @include make-backgroundimage-custom(md, (name: 'chip-icon#{$i}-lg', extname: 'png', width: 70, height: 70, rate: .75, nocenter: true, webp: true));
                    @include make-backgroundimage-custom($xs-node, (name: 'chip-icon#{$i}-lg', extname: 'png', width: 70*.6, height: 70*.6, rate: 1, nocenter: true, webp: true));

                    @include make-attributes-custom($xs-node, ()){
                        width: vw2px(70*.6);
                        height: vw2px(70*.6);
                        background-size: vw2px(70*.6) vw2px(70*.6);
                    }
                }
            }
        }
    }
}