给网站加上霓虹灯效果的文字公告栏

原创

半夜喝可乐

修改于 2023-11-28 21:57:33

1860

修改于 2023-11-28 21:57:33

文章被收录于专栏：小轻论坛小轻论坛

最近在自建论坛框架上加了很多小组件，一点点分享给大家，可能比较简单，大佬见笑了，请绕道。

如图，我在首页的顶部设置了一个公告栏，这个公告栏是左边有个bootstrap样式的图标，右边是不间断的公告文字内容。

这里的实现主要是采用以下前端样式：

<div class="d-flex align-items-center">
  <i class="bi bi-volume-up-fill announcement-icon"></i>
  <div class="scroll-container">
    <div class="neon-scroll-text">
      这是一个公告
    </div>
  </div>
</div>

图表样式可以使用常用的FontAwesome图标，因为我用的bootstrap库做的论坛，所以使用的也是它的样式，自行修改就行。

这里我将上面的图标样式和公告内容放在一起，使用d-flex让两者能够在同一行显示，否则会变成两行就难看了，下面是样式代码：

.scroll-container {
  height: 2.1rem; 
  overflow: hidden;
  position: relative;
  left: 10px;
  width: 100%;
}

.neon-scroll-text {
  font-size: 1.5rem;
  color: #dc3545;
  text-shadow: 0 0 10px #dc3545;
  white-space: nowrap;
  box-sizing: border-box;
  animation: neon-scroll 10s linear infinite;
}

.announcement-icon {
  font-size: 1.5rem;
  color: #dc3545;
}

@keyframes neon-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

样式中，很多内容都是可以修改的，比如颜色、字体大小，这里显示的效果是霓虹灯特效，大家都是可以自定义的。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期