前端跑马灯

最新推荐文章于 2024-05-07 03:18:09 发布

短暂又灿烂的

最新推荐文章于 2024-05-07 03:18:09 发布

阅读量230

点赞数

分类专栏： javascript css 前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_42232156/article/details/126306645

版权

前端同时被 3 个专栏收录

266 篇文章 11 订阅

订阅专栏

javascript

121 篇文章 7 订阅

订阅专栏

css

40 篇文章 0 订阅

订阅专栏

<div class="notice">
  <div class="marquee animation">
    <p class="tidings">
        188**2555 成功邀请3人,<span>获得价值30元</span>1分钟前
     </p>
     <p class="tidings">
        188**2555 成功邀请3人,<span>获得价值30元</span>1分钟前
     </p>
    </div>
 </div>

 /* 跑马灯 */
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }

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

  .marquee {
    // margin-top: 4%;
    display: block;
    // height: 7.46vw;
    white-space: nowrap;
    width: max-content;
    padding-left: 100%;
  }

  .marquee.animation {
    animation: marquee 40s linear infinite;
  }
  .tidings {
    display: inline-block;
    padding: 0 1.06vw;
    margin: 0 3.36vw;
  }

  .tidings > img {
    width: 5.33vw;
    height: 5.33vw;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
  }

  .tidings > span {
    color: #fcf39d;
  }