Css3 实现循环留言滚动效果（一）

一、常见留言滚动效果示例

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;
        }

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