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);注意事项
- 确保广告容器有明确的宽度或高度限制
- 动画时间根据实际需求调整
- 无限滚动需要复制一份内容以确保无缝衔接
- 考虑添加悬停暂停功能提升用户体验
这些方法可以根据实际需求组合使用或进一步扩展，实现更复杂的广告滚动效果。
