怎么通过css写一个滚动通告栏
时间: 2024-05-10 13:21:09 浏览: 8
可以通过以下代码实现一个滚动通告栏:
HTML 代码:
```html
<div class="notice-container">
<div class="notice-wrapper">
<div class="notice-item">通告1</div>
<div class="notice-item">通告2</div>
<div class="notice-item">通告3</div>
<!-- 添加更多通告 -->
</div>
</div>
```
CSS 代码:
```css
.notice-container {
height: 20px; /* 设置容器的高度 */
overflow: hidden; /* 隐藏超出容器的内容 */
}
.notice-wrapper {
display: flex; /* 设置弹性布局 */
animation: marquee 10s linear infinite; /* 设置动画 */
}
.notice-item {
flex-shrink: 0; /* 取消默认的伸缩 */
margin-right: 20px; /* 设置通告之间的间距 */
}
/* 设置动画关键帧 */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
```
这样就可以实现一个循环滚动的通告栏,修改通告内容只需要修改 HTML 代码中的 `.notice-item` 元素即可。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)