css制作广告滚动

CSS 制作广告滚动效果

广告滚动效果可以通过 CSS 动画或过渡效果实现，以下是几种常见的方法：

水平滚动广告

使用 @keyframes 动画实现水平无限滚动：

.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(-50%);
  }
}

HTML 结构示例：

<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-vertical {
  height: 200px;
  overflow: hidden;
}

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

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

淡入淡出切换效果

使用 CSS 过渡实现广告轮播：

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

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

.ad-fade img.active {
  opacity: 1;
}

JavaScript 控制轮播：

let current = 0;
const ads = document.querySelectorAll('.ad-fade img');

setInterval(() => {
  ads[current].classList.remove('active');
  current = (current + 1) % ads.length;
  ads[current].classList.add('active');
}, 3000);

注意事项

1. 确保广告容器有明确的宽度或高度限制
2. 动画时间根据实际需求调整
3. 无限滚动需要复制一份内容以确保无缝衔接
4. 考虑添加悬停暂停功能提升用户体验

这些方法可以根据实际需求组合使用或进一步扩展，实现更复杂的广告滚动效果。