<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barrage effect implemented by CSS</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
body {
background-color: white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
width: 800px;
height: 500px;
/* justify-content: center; */
border: 1px solid red;
text-align: center;
overflow: hidden;
}
.item {
height: 30px;
/* border: 1px solid skyblue; */
}
.item-1 {
color: brown;
text-shadow: 2px 2px 3px rgb(248, 81, 20);
transform: translateX(1000px);
animation: scrollTo linear 4s infinite;
}
.item-2 {
color: rgb(127, 197, 35);
text-shadow: 2px 2px 3px rgb(173, 255, 80);
transform: translateX(1050px);
animation: scrollTo linear 7s infinite;
}
.item-3 {
color: coral;
text-shadow: 2px 2px 3px coral;
transform: translateX(800px);
animation: scrollTo linear 5s infinite;
}
@keyframes scrollTo {
to {
transform: translateX(-500px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Barrage 1 Your friend Galeries Lafayette invites you to video</div>
<div class="item item-2">弹幕2 when u say nothing at all</div>
<div class="item item-3">Barrage 3 Xiaoyingying looks good</div>
</div>
</body>
<script>
</script>
</html>
Transfer from https://blog.csdn.net/jbj6568839z/article/details/103344345