Css 左右循環動畫_左右循環運動效果案例

Css 左右循環動畫_左右循環運動效果案例

方案1 animation+定時器、簡單css定義動畫，js錯開運行時間

css定義

      body {
            padding: 100px;
        }

        .block {
            background-color: aquamarine;
            width: 500px;
            height: 200px;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }

        .item {
            display: inline-block;
            white-space: nowrap;
            padding: 10px 30px;
            border-radius: 20px;
            background: blueviolet;
            color: white;
            position: absolute;
            left: 100%;
        }

        @keyframes runOne {
            from {
                left: 100%;
            }

            to {
                left: -20%;
            }
        }

        .item.active {
            animation: runOne 5s linear infinite;
        }

html

    <div class="block">
        <div class="item">張三豐</div>
        <div class="item">李四</div>
        <div class="item">王五</div>
        <div class="item">趙六</div>
        <div class="item">aaaaa</div>
    </div>

js

        //循環運動展示處理
        //方式1 使用 animation 動畫處理
        //總時間/總個數 =每個項運動的間隔

        //舉例子 5秒鍾 5個項 循環運動
        //處理運動
        var index = 0;
        var itemList = $('.item');
        setInterval(() => {
            itemList.eq(index).addClass('active');
            index++;
            if (index == itemList.length)
                index = 0;
        }, 1000);

展示效果：

 

 

 

方案2：

待完善

 

更多：

CSS3 動畫

CSS3 進度條布局整理

Css3 實現全圓進度條展示功能