消息轮播通知栏实现

一条大河全靠浪

于 2024-01-18 09:37:12 发布

阅读量671

点赞数 8

分类专栏：前端实践文章标签： css3 前端轮播通知

本文链接：https://blog.csdn.net/HYeeee/article/details/135665843

版权

前端实践专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、使用marquee实现

marquee标签是HTML标签中创建文字滚动的标签

<marquee behavior="scroll" direction="left">我是滚动内容</marquee>

二、antd 组件

1、pc端：

在这里插入图片描述
2、app端：ant design mobile

NoticeBar 通告栏组件
在这里插入图片描述

三、Css animation实现

<div className={styles.broadcast}>
  <NotificationTwoTone className="text-xl" />
     <div className={styles.broadcast__wrap}>
       <div className={styles['broadcast__wrap--list']}>
         {infoList.map((item) => (
           <span className={styles['broadcast__wrap--item']} key={item.id}>
             {item.bcMsg}
             {item.url && (
               <a target="_blank" href={item.url} className="ml-2">
                 查看详情
               </a>
             )}
           </span>
         ))}
       </div>
     </div>
     <CloseOutlined className="hover:text-blue" onClick={closeMarquee} />
   </div>

.broadcast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 40px;
  background: @blue-c2;
  .broadcast__wrap {
    flex: 1;
    margin: 0 16px;
    width: calc(100% - 200px);
    overflow: hidden;

    .broadcast__wrap--list {
      height: 22px;
      display: flex;
      flex-wrap: nowrap;
      width: fit-content;
      animation: marquee 50s linear infinite;
      animation-play-state: running;

      // 悬浮暂停
      &:hover {
        animation-play-state: paused;
      }

      .broadcast__wrap--item {
        display: inline-block;

        text-align: left;
        white-space: nowrap;
      }
      .broadcast__wrap--item + .broadcast__wrap--item {
        margin-left: 200px;
      }
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(calc(100vw - 200px));
    }
    100% {
      transform: translateX(-100%);
    }
  }
}