hbuilderx走马灯效果

以下是使用定时器和CSS3实现HBuilderX走马灯效果的示例代码：

HTML部分：

<div class="notice">
  <ul class="notice-list">
    <li>公告1</li>
    <li>公告2</li>
    <li>公告3</li>
    <li>公告4</li>
    <li>公告5</li>
  </ul>
</div>

CSS部分：

.notice {
  width: 200px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  -webkit-animation: notice 10s linear infinite;
  animation: notice 10s linear infinite;
}

.notice-list li {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
}

.notice-list li:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.notice-list li:nth-child(2) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.notice-list li:nth-child(3) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.notice-list li:nth-child(4) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.notice-list li:nth-child(5) {
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}

@-webkit-keyframes notice {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes notice {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

以上代码实现了一个宽度为200px，高度为30px的公告栏，公告栏中包含5条公告，每条公告之间通过CSS3动画实现了无缝切换的走马灯效果。