首页 建站教程 WEB前端 正文

纯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以下兼容性都不是很好,如何取舍大家根据自己的需要。

演示效果

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/215.html

相关推荐

纯CSS3实现3D切换选项卡

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体...
WEB前端 2022.08.16 0 298
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持