用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代码中的样式属性，如文字颜色、背景色等。

相关问题

用css实现横向滚动消息通知栏，高35px，宽400px，并且固定在屏幕中间，要求信息从右到左移动

可以这样实现：

HTML部分：

<div class="notice">
  <marquee behavior="scroll" direction="left">这里是滚动通知栏的内容</marquee>
</div>

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，并且固定在屏幕中间，要求信息从通知栏右边每隔10s向左移动

你可以参考以下代码实现：

<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>