用css实现横向滚动消息通知栏,高35px,宽400px,并且固定在屏幕中间,要求信息从右到左移动
时间: 2024-04-29 15:22:31 浏览: 236
可以这样实现:
HTML部分:
```html
<div class="notice">
<marquee behavior="scroll" direction="left">这里是滚动通知栏的内容</marquee>
</div>
```
CSS部分:
```css
.notice {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 35px;
width: 400px;
overflow: hidden;
}
.notice marquee {
height: 35px;
overflow: hidden;
width: 100%;
font-size: 14px;
color: #fff;
}
```
注意:
1. `position: fixed`,将元素固定在屏幕上显示
2. `top: 50%; left: 50%; transform: translate(-50%, -50%);`,将元素在屏幕居中显示
3. `overflow: hidden`,隐藏超出元素高度或宽度的内容
4. `marquee` 标签是用来实现滚动效果的,其中 `behavior="scroll" direction="left"` 表示滚动方向是从右到左
相关问题
用css实现横向滚动消息通知栏,高35px,宽400px,并且固定在屏幕中间
可以使用以下CSS代码实现横向滚动消息通知栏:
```
.scroll {
width: 400px;
height: 35px;
overflow: hidden;
white-space: nowrap;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll p {
display: inline-block;
margin: 0;
padding: 0 10px;
font-size: 14px;
line-height: 35px;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
```
使用时,在HTML中添加以下代码即可:
```
<div class="scroll">
<p>这里是滚动消息通知栏,内容可以自己编写。</p>
</div>
```
可以根据需要调整CSS代码中的样式属性,如文字颜色、背景色等。
阅读全文