css轮播文字制作

使用CSS动画实现轮播文字

通过CSS的@keyframes和animation属性可以实现文字轮播效果。以下是一个基础示例：

<div class="text-carousel">
  <span>第一段文字</span>
  <span>第二段文字</span>
  <span>第三段文字</span>
</div>

.text-carousel {
  height: 30px;
  overflow: hidden;
  position: relative;
}

.text-carousel span {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: text-carousel 9s infinite;
}

.text-carousel span:nth-child(1) { animation-delay: 0s; }
.text-carousel span:nth-child(2) { animation-delay: 3s; }
.text-carousel span:nth-child(3) { animation-delay: 6s; }

@keyframes text-carousel {
  0% { opacity: 0; transform: translateY(100%); }
  10% { opacity: 1; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(0); }
  40% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(-100%); }
}

使用marquee标签实现简单轮播

HTML原生<marquee>标签可以实现简单的文字滚动效果：

<marquee behavior="scroll" direction="left" scrollamount="5">
  这里是需要轮播的文字内容
</marquee>

可以通过CSS控制样式：

marquee {
  width: 300px;
  background: #f0f0f0;
  padding: 10px;
}

结合CSS和JavaScript实现可控轮播

更灵活的实现方式需要结合JavaScript控制：

<div class="text-slider">
  <div class="slide active">文字1</div>
  <div class="slide">文字2</div>
  <div class="slide">文字3</div>
</div>

.text-slider {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

setInterval(nextSlide, 3000);

使用CSS变量控制轮播速度

通过CSS变量可以方便地调整轮播速度：

:root {
  --slide-duration: 3s;
}

.text-carousel {
  /* 其他样式 */
  animation-duration: calc(var(--slide-duration) * 3);
}

响应式轮播文字设计

确保轮播在不同设备上正常显示：

.text-carousel {
  font-size: clamp(14px, 3vw, 24px);
  height: auto;
  min-height: 2em;
}