用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"` 表示滚动方向是从右到左