css制作广告滚动

使用CSS动画实现广告滚动

通过CSS的@keyframes和animation属性可以实现平滑的广告滚动效果。这种方法无需JavaScript，性能较好。

<div class="ad-container">
  <div class="ad-content">
    <span>广告1</span>
    <span>广告2</span>
    <span>广告3</span>
  </div>
</div>

.ad-container {
  width: 300px;
  height: 50px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

.ad-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

.ad-content span {
  display: inline-block;
  padding: 15px;
  margin-right: 20px;
}

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

使用marquee标签（不推荐）

虽然HTML提供了<marquee>标签，但已过时，不建议在现代网站中使用。

<marquee behavior="scroll" direction="left" scrollamount="5">
  广告1 广告2 广告3
</marquee>

结合CSS和JavaScript实现

如果需要更复杂的控制（如暂停、速度调整），可以结合JavaScript实现。

<div class="ad-scroll" id="adScroll">
  <div class="ad-item">广告1</div>
  <div class="ad-item">广告2</div>
  <div class="ad-item">广告3</div>
</div>

.ad-scroll {
  width: 300px;
  height: 50px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.ad-item {
  min-width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

const adScroll = document.getElementById('adScroll');
let current = 0;
const items = adScroll.children;
const itemCount = items.length;

function scrollAd() {
  current = (current + 1) % itemCount;
  adScroll.style.transform = `translateX(-${current * 100}%)`;
}

setInterval(scrollAd, 2000);

垂直滚动效果

修改CSS动画可以实现垂直滚动效果。

.ad-container-vertical {
  height: 100px;
  overflow: hidden;
}

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

@keyframes scrollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

响应式广告滚动

使用CSS媒体查询确保在不同屏幕尺寸下都能正常显示。

@media (max-width: 768px) {
  .ad-container {
    width: 100%;
  }

  .ad-content {
    animation-duration: 15s;
  }
}