```html
🔥 限时活动：全场商品满300减80 | 新用户册立享50元优惠券 | 会员专享双倍积分
<style>
@keyframes scrollBanner {
0% { left: 100%; transform: translateX(0); }
100% { left: 0; transform: translateX(-100%); }
}
```
核心代码中，``标签通过`position:absolute`脱离文档流，`white-space:nowrap`确保文字不换行；`@keyframes`定义从右侧进入、左侧退出的滚动路径，`animation`属性控制动画时长18s、速度曲线linear及循环infinite。
二、JavaScript控制流动横幅 JavaScript方案可灵活调整滚动速度、方向及触发条件，适合动态内容场景。```html
📢 系统更新通知：V2.5版本已上线，新增深色模式与数据导出功能
<script>
const container = document.getElementById('dynamicBanner');
const content = document.getElementById('bannerContent');
let currentPos = container.offsetWidth; // 初始位置：容器右侧
const scrollSpeed = 1.5; // 滚动速度数值越大越快
function moveBanner() { currentPos -= scrollSpeed; if (currentPos < -content.offsetWidth) { // 内容全移出容器时重置位置 currentPos = container.offsetWidth; } content.style.left = currentPos + 'px'; requestAnimationFrame(moveBanner); // 平滑动画 }
moveBanner(); // 启动滚动 </script> ```
此方案中，`requestAnimationFrame`替代`setInterval`实现更流畅的动画；通过`currentPos`变量实时更新位置，当内容全移出容器左侧时，重置到容器右侧继续滚动，实现缝循环。
三、样式自定义与优化 通过调整核心属性可适配不同场景需求：- 颜色与字体：修改`color`如`#ff5722`、`font-size`如`18px`及`background`如`#fff3e0`；
- 滚动速度：CSS方案调整`animation`时长如`12s`加速，JS方案修改`scrollSpeed`值如`2`；
- 方向控制：CSS动画反向滚动可调整`@keyframes`起始/位置`0% { left: -100%; }`，`100% { left: 100%; }`。 流动横幅通过简洁代码实现动态效果，既能提升信息曝光率，又不干扰用户浏览，是网页设计中的实用工具。
0
0
延伸阅读：
下一篇：返回列表
×