m0_59727497 2021-07-02 02:01 采纳率: 100%
浏览 302
已采纳

想用css做文字上下循环滚动

知乎上看到的代码，可以用吗？需要改哪里？

img

  • 写回答

3条回答 默认 最新

  • wanmeikakaxi 2021-07-02 06:55
    关注

    答案满意记得采纳，谢谢。
    img

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>css文字上下循环滚动</title>
    <style type="text/css">
    @-webkit-keyframes rowup {
    0% {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
100% {
    -webkit-transform:translate3d(0,-307px,0);
    transform:translate3d(0,-307px,0);
}
}@keyframes rowup {
    0% {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
100% {
    -webkit-transform:translate3d(0,-307px,0);
    transform:translate3d(0,-307px,0);
}
}.demo-list {
    width:300px;
    border:1px solid #999;
    margin:20px auto;
    position:relative;
    height:200px;
    overflow:hidden;
}
.demo-list .rowup {
    -webkit-animation:10s rowup linear infinite normal;
    animation:10s rowup linear infinite normal;
    position:relative;
}

    </style>
    </head>
  <body>
    <h1 style="text-align: center;">css文字上下循环滚动</h1>
    <div class="demo-list">
      <div class="cc rowup">
        <div class="item">1- 文字标题1111111111111111</div>
        <div class="item">2- 文字标题22222222222222</div>
        <div class="item">3- 文字标题333333333333333</div>
        <div class="item">4- 文字标题4444444444</div>
        <div class="item">5- 文字标题555555555555</div>
        <div class="item">6- 文字标题6666666666</div>
        <div class="item">7- 文字标题777777777777</div>
        <div class="item">8- 文字标题8888888888888</div>
        <div class="item">9- 文字标题9999999999999</div>
        <div class="item">10- 文字标题101010101010</div>
        <div class="item">11- 文字标题1111111111111111</div>
        <div class="item">12- 文字标题1212121212</div>
        <div class="item">13- 文字标题131313131313</div>
        <div class="item">14- 文字标题141414141414</div>
        <div class="item">15- 文字标题151515515</div>
        <div class="item">16- 文字标题161616161616</div>
        <div class="item">17- 文字标题1717171717</div>
        <div class="item">18- 文字标题1818181818</div>
        <div class="item">19- 文字标题191919</div>
        <div class="item">20- 文字标题202020</div>
    </div>
  </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏