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 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法