css制作广告滚动

CSS 制作广告滚动效果

使用 CSS 可以实现多种广告滚动效果，包括横向滚动、纵向滚动、淡入淡出等。以下是几种常见的实现方法。

横向滚动广告

横向滚动广告通常使用 animation 和 @keyframes 实现。

<div class="ad-container">
  <div class="ad-content">
    <img src="ad1.jpg" alt="广告1">
    <img src="ad2.jpg" alt="广告2">
    <img src="ad3.jpg" alt="广告3">
  </div>
</div>

.ad-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

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

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

纵向滚动广告

纵向滚动广告可以通过调整 transform: translateY 实现。

<div class="vertical-ad">
  <ul>
    <li>广告内容 1</li>
    <li>广告内容 2</li>
    <li>广告内容 3</li>
  </ul>
</div>

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

.vertical-ad ul {
  animation: scroll-up 8s linear infinite;
}

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

淡入淡出效果

使用 opacity 和 animation 实现广告图片的淡入淡出切换。

<div class="fade-ad">
  <img src="ad1.jpg" class="active">
  <img src="ad2.jpg">
  <img src="ad3.jpg">
</div>

.fade-ad {
  position: relative;
  height: 300px;
}

.fade-ad img {
  position: absolute;
  opacity: 0;
  animation: fade 12s infinite;
}

.fade-ad img:nth-child(1) { animation-delay: 0s; }
.fade-ad img:nth-child(2) { animation-delay: 4s; }
.fade-ad img:nth-child(3) { animation-delay: 8s; }

@keyframes fade {
  0%, 30% { opacity: 0; }
  33%, 63% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

使用 CSS 和 JavaScript 结合实现

如果需要更复杂的控制（如暂停、点击事件），可以结合 JavaScript。

<div class="js-ad-container">
  <div class="js-ad-content">
    <img src="ad1.jpg" alt="广告1">
    <img src="ad2.jpg" alt="广告2">
    <img src="ad3.jpg" alt="广告3">
  </div>
</div>

.js-ad-container {
  width: 100%;
  overflow: hidden;
}

.js-ad-content {
  display: flex;
  transition: transform 0.5s ease;
}

const adContent = document.querySelector('.js-ad-content');
let currentIndex = 0;
const ads = document.querySelectorAll('.js-ad-content img');
const adWidth = ads[0].clientWidth;

function scrollAd() {
  currentIndex = (currentIndex + 1) % ads.length;
  adContent.style.transform = `translateX(-${currentIndex * adWidth}px)`;
}

setInterval(scrollAd, 3000);

注意事项

• 确保广告容器的宽度或高度足够容纳内容，避免截断。
• 使用 overflow: hidden 隐藏超出部分。
• 调整 animation-duration 控制滚动速度。
• 对于响应式设计，使用百分比或 vw/vh 单位确保适配不同屏幕。

以上方法均可根据实际需求调整动画时间、滚动方向和效果。