纯css实现菜单或列表循环向上滚动效果

 上次我们讲了用JS方式实现新闻不断滚动效果:实例操作之新闻不断滚动显示效果的实现虽然代码也很精简了，但是对于JS有恐惧症的同学来说还是不太好理解，相对于JS，大家对css更容易掌握，那么今天我们就提供给大家一个用css书写的新闻不断向上滚动效果。先写一段简单的html结构 <ul...

在前端开发过程中，有时候针对某个模块需要无限循环的滚动一些消息或菜单，我们常用的方法基本上都是通过js来实现，虽然代码相对来说可能会精简一些，但是对于JS不是很熟悉的同学来说还是不太好理解，毕竟相对于JS，大家对css更容易掌握，那么今天我们就提供给大家一个用纯css实现的列表循环向上滚动的效果。

实现思路通过CSS3的animation属性来实现，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。

animation: scrollUp 6s infinite;

滚动速度可调整animation属性中6s的值，代表6秒。
完整html代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>纯css实现菜单或列表循环向上滚动效果</title>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
            }

            body {
                font-family: 微软雅黑, 'Microsoft YaHei', 'PingFang SC', Hiragino Sans GB, Helvetica Neue, Helvetica, Condensed, Arial, sans-serif;
            }

            a {
                color: #2D2D2D;
                text-decoration: none;
            }

            .box {
                width: 300px;
                margin: 100px auto;
            }

            .list {
                list-style: none;
                width: 100%;
                height: 30px;
                overflow: hidden;
            }

            .list li {
                width: 100%;
                height: 30px;
                position: relative;
                line-height: 30px;
                font-size: 14px;
                background-color: #f6f6f6;
                padding: 0 10px;
                animation: scrollUp 6s infinite;
            }

            @keyframes scrollUp {
                0% {
                    top: 0px;
                }

                25% {
                    top: 0px;
                }

                50% {
                    top: -30px;
                }

                75% {
                    top: -60px;
                }

                100% {
                    top: -90px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="list">
                <li><a href="#">优美主题</a></li>
                <li><a href="#">前端开发</a></li>
                <li><a href="#">模版设计</a></li>
                <li><a href="#">优美插件</a></li>
            </ul>
        </div>
    </body>
</html>

不过也有缺点，css3的很多属性在IE9以下兼容性都不是很好，如何取舍大家根据自己的需要。

演示效果

此处为隐藏内容，请评论后查看隐藏内容，谢谢！