css3 弹幕滚动效果 |css 判断手机操作系统

.container {
position: relative;
overflow: hidden;
height: 300px;
background-color: #f5f5f5;
}
.bullet {
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
font-size: 16px;
color: #333;
animation: bulletMove 5s linear;
}
@keyframes bulletMove {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

在上面的代码中，大家首先创建了一个容器，设置了其为相对定位，且设置了宽度和高度，这个容器即为弹幕的展示区域。然后，大家创建了一个弹幕元素 bullet，使用了绝对定位，同时在左侧设置了位置为 100%，即在屏幕外，弹幕文字显示的颜色为 #333，字号为 16px。

接下来，大家定义了一个 bulletMove 动画，它控制了弹幕的运动方式。from 表示动画开始时的状态，即弹幕在屏幕右侧，通过 transform: translateX(100%) 将其移动到屏幕右侧。to 表示动画结束时的状态，即弹幕在屏幕左侧，通过 transform: translateX(-100%) 将其移动到屏幕左侧。最后，大家为 bullet 元素设置了动画 bulletMove，运动时间为 5s。

这样，弹幕滚动效果就实现了。通过将多个弹幕元素加入到容器中，使它们同时滚动，即可实现弹幕效果。