css轮播文字制作

使用CSS动画实现文字轮播

通过CSS的@keyframes和animation属性实现水平或垂直文字轮播效果。以下是水平轮播示例代码：

<div class="text-carousel">
  <div class="carousel-content">
    <span>公告1：这是第一条轮播文字</span>
    <span>公告2：这是第二条轮播文字</span>
    <span>公告3：这是第三条轮播文字</span>
  </div>
</div>

.text-carousel {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ddd;
}

.carousel-content {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

使用CSS过渡实现淡入淡出效果

通过opacity和transition实现文字渐变切换效果：

.fade-carousel span {
  opacity: 0;
  position: absolute;
  transition: opacity 1s ease-in-out;
}

.fade-carousel span.active {
  opacity: 1;
}

JavaScript控制当前显示项：

let current = 0;
const items = document.querySelectorAll('.fade-carousel span');

function cycleItems() {
  items[current].classList.remove('active');
  current = (current + 1) % items.length;
  items[current].classList.add('active');
}

setInterval(cycleItems, 2000);

垂直滚动文字轮播

使用transform: translateY实现垂直方向滚动：

.vertical-carousel {
  height: 40px;
  overflow: hidden;
}

.vertical-content {
  animation: verticalScroll 8s linear infinite;
}

@keyframes verticalScroll {
  0% { transform: translateY(0); }
  30% { transform: translateY(-40px); }
  60% { transform: translateY(-80px); }
  100% { transform: translateY(0); }
}

响应式文字轮播设计

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .text-carousel {
    width: 100%;
    font-size: 14px;
  }

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-120%); }
  }
}

性能优化技巧

避免使用margin或padding制作动画效果，优先使用transform属性。为动画元素添加will-change属性提升性能：

.carousel-content {
  will-change: transform;
}

文字轮播内容较多时，考虑使用animation-timing-function: steps()实现分步动画：

.step-carousel {
  animation: scrollSteps 10s steps(3) infinite;
}