最近在自建论坛框架上加了很多小组件，一点点分享给大家，可能比较简单，大佬见笑了，请绕道。
如图，我在首页的顶部设置了一个公告栏，这个公告栏是左边有个bootstrap样式的图标，右边是不间断的公告文字内容。
这里的实现主要是采用以下前端样式：
代码语言：javascript复制<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让两者能够在同一行显示，否则会变成两行就难看了，下面是样式代码：
代码语言：javascript复制.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腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
