滚动公告小组件

加班是不可能的，除非双倍日工资

于 2024-07-18 14:52:12 发布

阅读量197

点赞数 1

分类专栏：前端网页基础文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_45591772/article/details/140522806

版权

基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端网页

6 篇文章 0 订阅

订阅专栏

pc端想要做类似手机端滚动广告的功能,懒得找资源,使用html + css 自己手搓一个先上效果图 !

在这里插入图片描述

以下是源码! 仅做笔记使用

html 部分

 <!-- 滚动公告 -->
    <div class="notice-box">
      <div class="notice-icon">
        <i class="bi bi-cup-hot"></i>
        <span>上新公告</span>
      </div>
      <div class="notice-cont">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero necessitatibus alias beatae obcaecati unde.
          Aliquid est sint cum explicabo suscipit distinctio, quam ratione quas, ipsum molestiae consequuntur, maiores
          pariatur qui.</span>
      </div>
    </div>

css 部分


// 滚动公告
  .notice-box {
    width: 1100px;
    // height: 40px;
    padding: 12px 15px;
    background-color: #FFF;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    bottom: 29px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-size: 14px;

    .notice-icon {
      width: 100px;
      // overflow: hidden;

      i {
        margin-right: 8px;
        color: var(--bgcolor);
      }
    }

    .notice-cont {
      flex: 1;
      overflow: hidden;

      span {
        display: block;
        animation: rollText 20s linear infinite;
        white-space: nowrap;
        padding-left: 100%;
        padding-right: 100%;
      }
    }
  }
}

@keyframes rollText {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(-130%);
  }
}