用css实现横向滚动消息通知栏,高35px,宽400px,并且固定在屏幕中间,要求信息从通知栏右边每隔10s向左移动
时间: 2024-05-03 10:21:06 浏览: 19
你可以参考以下代码实现:
```
<style>
.notification-bar {
width: 400px;
height: 35px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.notification-bar ul {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
font-size: 16px;
animation: scroll 10s linear infinite;
}
.notification-bar li {
display: inline-block;
padding: 0 20px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="notification-bar">
<ul>
<li>通知1</li>
<li>通知2</li>
<li>通知3</li>
</ul>
</div>
```