当前位置：首页 > article >正文

html + css 顶部滚动通知栏示例

article 2025/1/13 3:16:10

前言

在现代网页设计中，一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息，还能提升用户体验。通过使用HTML和CSS，我们可以创建既美观又功能强大的组件，这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。

本示例将展示如何使用div元素和纯CSS来构建一个固定在页面顶部的滚动通知栏，而不依赖于已经废弃的<marquee>标签。我们将介绍必要的HTML结构以及相应的CSS样式，包括一个自定义的动画效果，确保文本可以平滑地从右向左滚动，同时保持良好的浏览器兼容性和可读性。

使用div和纯CSS实现滚动效果

html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>滚动通知栏示例</title>
</head>

<body>
  <!-- 滚动通知栏 -->
  <div class="scrolling-notification-bar">
    <div class="scrolling-text-wrapper">
      <div class="scrolling-text">
        过了腊八就是年。
      </div>
    </div>
  </div>

  <!-- 页面其他内容 -->
  <div class="content">
    <h4>腊八粥香，年味渐浓</h4>
    <p>腊八粥的香气飘散在空气中，仿佛在提醒我们，春节的脚步已经近在咫尺。让我们一起期待这个充满欢声笑语的节日吧！</p>

    <h4>腊八过后，年味渐浓</h4>
    <p>腊八粥的温暖，预示着春节的临近。让我们在这个寒冷的冬日里，感受家的温暖和节日的喜悦。</p>

    <h4>腊八粥香，年味渐浓，团圆不远</h4>
    <p>腊八粥的香气，是春节的前奏。让我们在腊八的温暖中，期待与家人团聚的温馨时刻。</p>

    <h4>腊八粥香，年味渐浓，喜气洋洋</h4>
    <p>腊八粥的香甜，是春节的序曲。让我们在这个充满喜气的季节里，迎接新的一年，新的希望。</p>

    <h4>腊八粥香，年味渐浓，欢声笑语</h4>
    <p>腊八粥的香气，是春节的信号。让我们在这个充满欢声笑语的季节里，感受家的温暖和节日的快乐。</p>
  </div>
</body>

</html>

css (index.css) 代码如下：

/* 确保通知栏始终在页面顶部 */
.scrolling-notification-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  z-index: 1000;
}
.scrolling-text-wrapper {
  overflow: hidden;
  white-space: nowrap;
}
.scrolling-text {
  display: inline-block;
  padding-left: 100%; /* 初始位置在外边 */
  animation: scrollText 20s linear infinite;
}
@keyframes scrollText {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.content {
  margin-top: 100px;
}