css实现跑马灯（电子屏滚动）效果

  • 开发
  • 50
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marquee</title>
    <style>
      .marquee {
     
        margin-left: 100px;
        width: 300px;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid #4c7cee;
      }
      .marquee-txt {
     
        display: inline-block;
        padding-left: 100%; /* 从右至左开始滚动 */
        animation: marqueeAnimation 4s linear infinite;
      }
      @keyframes marqueeAnimation {
     
        0% {
     
          transform: translate(0, 0);
        }
        100% {
     
          transform: translate(-100%, 0);
        }
      }
    </style>
  </head>

  <body>
    <div class="marquee">
      <span class="marquee-txt">css实现跑马灯（电子屏滚动）效果</span>
    </div>
  </body>
</html>
阅读全部

相关推荐

  1. css实现跑马灯（电子屏滚动）效果

    2023-12-09 15:22:03       51 阅读

  3. Android 实现跑马灯效果

    2023-12-09 15:22:03       50 阅读

  4. Python中实现跑马灯效果

    2023-12-09 15:22:03       43 阅读

  5. react mui textfield marquee 跑马灯效果实现

    2023-12-09 15:22:03       53 阅读

  6. Android 自定义Drawable实现跑马灯效果

    2023-12-09 15:22:03       25 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-09 15:22:03       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-09 15:22:03       100 阅读

  9. 在Django里面运行非项目文件

    2023-12-09 15:22:03       82 阅读

  19. Python语言-面向对象

    2023-12-09 15:22:03       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2023-12-09 15:22:03       85 阅读

热门阅读

  1. 数据结构-队列

    2023-12-09 15:22:03       55 阅读

  2. C语言实战演练之贪吃蛇游戏

    2023-12-09 15:22:03       47 阅读

  6. Day03 嵌入式---中断

    2023-12-09 15:22:03       53 阅读

  12. 什么是VPS？VPS有什么用？

    2023-12-09 15:22:03       58 阅读

  14. React中传入props.children后, 为什么会导致组件的重新渲染？

    2023-12-09 15:22:03       62 阅读

  15. .mallox勒索病毒解密：恢复数据与网络安全对策

    2023-12-09 15:22:03       53 阅读