Css3 實現循環留言滾動效果（一）

1、常見留言滾動效果示例

html代碼

    <div class="runList">
        <div class="runitem">
            <span class="name">張三丰</span> 訪問了你的名片
        </div>
        <div class="runitem">
            <span class="name">王曉華</span> 訪問了你的名片
        </div>
        <div class="runitem">
            <span class="name">李曉明</span> 訪問了你的名片
        </div>
    </div>

 

css代碼

    @keyframes runItem {
            0% {
                opacity: 0.5;
                transform: translate(0px, 50px) scale(0.8);
            }

            15% {
                opacity: 1;
                transform: translate(0px, 0px) scale(1);
            }

            50% {
                opacity: 1;
                transform: translate(0px, 0px) scale(1);
            }

            65% {
                opacity: 0;
                transform: translate(0px, -60px) scale(0.8);
            }

            100% {
                opacity: 0;
            }
        }

        .runitem {
            display: inline-block;
            background: #ddd;
            padding: 5px 10px;
            border-radius: 3px;
            position: fixed;
            opacity: 0;
            top: 100px;
            font-size: 13px;
        }
        .runitem .name{
            font-size: 15px;
        color:red;
        }

        .runitem.active {
            animation: runItem 5s ease-in-out normal forwards;
        }

View Code

js代碼：

$(function () {
    var itemList = $('.runitem');
    var index = 0;
    //定義定時器
    setInterval(() => {
        run();
    }, 5000);
    run();

    //執行運動
    function run() {
        itemList.eq(index).addClass('active')
            .siblings()
            .removeClass('active');
        index++;
        if (index == itemList.length)
            index = 0;
    }
});

運行效果；

 

更多：

Css3實現波浪效果3-靜態波紋

Css3實現波浪效果2

Css3實現波浪線效果1