问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

我想问下怎么用css实现这个滚动效果

头像
复杂的是人
    4234182

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>moveUp</title>
    <style>
    @keyframes scroll {
    0% {

    -webkit-transform: translateY(0px);
transform: translateY(0px);

    }
    20% {

    -webkit-transform: translateY(0px);
transform: translateY(0px);

    }
    25% {

    -webkit-transform: translateY(-30px);
transform: translateY(-30px);

    }
    45% {

    -webkit-transform: translateY(-30px);
transform: translateY(-30px);

    }
    50% {

    -webkit-transform: translateY(-60px);
transform: translateY(-60px);

    }
    70% {

    -webkit-transform: translateY(-60px);
transform: translateY(-60px);

    }
    75% {

    -webkit-transform: translateY(-90px);
transform: translateY(-90px);

    }
    95% {

    -webkit-transform: translateY(-90px);
transform: translateY(-90px);

    }
    100% {

    -webkit-transform: translateY(-120px);
transform: translateY(-120px);

    }
    }
    div {
    width: 200px;
    height: 30px;
    overflow: hidden;
    }
    ul {
    height: 100%;
    width: 100%;
    -webkit-animation: scroll 5s infinite;
    margin: 0;
    padding: 0;
    }
    li {
    line-height: 30px;
    height: 30px;
    }
    </style>
    </head>
    <body>
    <div>
    <ul>

        <li>第一行</li>
    <li>第二行</li>

    </ul>
    </div>
    </body>
    </html>
    以上是我要实现的效果，但是在li的数量不确定的时候这个该怎么写

    css3动画
    阅读 1.7k
    1 个回答
    得票最新
    头像
    攻城狮Lee丶
      2.8k3833
      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
    <style>
        *{margin: 0;padding: 0;}
        .wrap{width:100px; margin: 100px auto;position: relative; overflow: hidden;height: 30px;}
        .scroll_box{position: absolute; top: 0;left: 0;width: 100%;}
        .scroll_box li{line-height: 30px; background: red; color: #fff; text-align: center;}
    </style>
</head>
<body>
    <div>
        <div class="wrap">
            <ul class="scroll_box">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var box = document.getElementsByClassName("scroll_box")[0];
    var len = box.getElementsByTagName('li').length;
    var index = 0;
    setInterval(function(){
        index === (len-1) ? index = 0 : index++;
        box.style.top = index*30*-1+'px';
    },1000)

</script>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题