纯css实现文字走马灯

最新推荐文章于 2024-05-20 10:36:30 发布

一杯充满泡泡的可乐

最新推荐文章于 2024-05-20 10:36:30 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45781661/article/details/124295709

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

纯css实现文字走马灯

主要用到了css3中animation,效果和代码如下

在这里插入图片描述

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      min-height: 100vh;
    }

    .wrap .info {
      height: 20px;
      margin: 10px;
      font-size: 14px;
      color: white;
      padding: 0 5px;
      background-color: black;
      display: flex;
      align-items: center;
      border-radius: 4px;
    }

    .wrap .info .words-inner {
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 0 5px;

    }

    .wrap .info .words-inner .words {

      position: relative;
      width: fit-content;
      animation: move 8s linear infinite;
    }

    .wrap .info .words-inner .words::after {
      position: absolute;
      right: -100%;
      content: attr(text);
    }

    @keyframes move {
      0% {
        transform: translateX(5%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .wrap .info img {
      width: 10px;
      height: 10px;
      object-fit: cover;
    }
  </style>
</head>

<body>

  <div class="wrap">
    <div class="info">
      <!-- 图片可以自定义 -->
      <img src="./images/top-one.png" alt="">:
      <div class="words-inner">
        <p class="words">
          测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试结束
        </p>
      </div>
    </div>
  </div>
</body>

</html>```

一杯充满泡泡的可乐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现文字走马灯

纯css实现文字走马灯主要用到了css3中animation,效果和代码如下<!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
复制链接

扫一扫