您是否曾经看过某些网站上飘过的文字？这种文字会从左到右快速移动，然后消失在屏幕的另一侧。这种效果被称为弹幕，现在我们来学习如何使用 CSS 实现这个效果。

/* 创建一个容器 */
.barrage {
position: relative;
height: 30px;
/* 使容器内的文字超出容器范围，以达到文字弹幕的目的 */
overflow: hidden;
}
/* 创建一个跑道 */
.barrage span {
position: absolute;
top: 0;
left: -100px;
/* 为文字弹幕添加样式 */
font-size: 16px;
color: white;
text-shadow: 1px 1px 2px black;
/* 设置动画 */
animation: barrage 8s linear infinite;
}
/* 创建动画 */
@keyframes barrage {
/* 弹幕从左侧开始移动 */
0% {
left: -100px;
}
/* 弹幕以每秒 100px 的速度向右移动 */
100% {
left: 100%;
}
}

现在我们已经创建了弹幕的样式和动画，我们只需要在 HTML 中添加这个容器和文字即可。

Hello World!

这样，我们就创建了一个从左到右移动的文字弹幕。如果您想在页面上添加更多弹幕，只需复制容器和文字并更改其中的文本即可。好玩吧！