很哇塞的网页特效之字符串切换

        本篇分享的字符串切换特效通过CSS动画实现，没有JS代码控制。

        此效果属于相对比较常可能用到的特效。效果如下图所示：

        

        切换的字符串用无序列表ul保存，CSS动画通过控制ul的显示位置达到切换效果：

        <div class="container">
            <span class="text">
                新年运势
            </span>
            <ul class="list">
                <li class="item">吃不完</li>
                <li class="item">穿不完</li>
                <li class="item">花不完</li>
            </ul>
        </div>

         动画样式：

.list{
    animation-name: change;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes change {
    0%, 20%, 100% {
        transform: translate3d(0, 0, 0);
    }

    25%, 45% {
        transform: translate3d(0, -33.33%, 0);
    }

    50%, 70% {
        transform: translate3d(0, -66.66%, 0);
    }

    75%, 95% {
        transform: translate3d(0, -33.33%, 0);
    }
}

        这里动画效果设置了4帧，因为列表有四行，每帧对应：

        第一行到第二行、第二行到第三行、第三行到第二行、第二行到第一行

        4x + 4y = 100 (100%动画周期)

        x = 20; 单行停留时间

        y = 5;  两行之间切换耗时

        可根据行数调整x和y达到不同速度效果。

代码下载：很哇塞的网页特效之字符串切换源代码-网页制作文档类资源-CSDN下载        

分享的代码只设置了chrome样式，兼容其他浏览器请自行添加兼容性写法。