用html 和css做一个视频弹幕效果
时间: 2024-05-27 11:14:22 浏览: 216
<!DOCTYPE html>
<html>
<head>
<title>视频弹幕效果</title>
<style>
body{
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
.container{
width: 80%;
margin: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.video-wrapper{
position: relative;
padding-top: 56.25%;
/* 16:9 aspect ratio */
}
.video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.barrage{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 200px;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
}
.barrage-item{
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px;
animation: move 10s linear infinite;
}
@keyframes move{
from{
left: 100%;
}
to{
left: -100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video class="video" controls>
<source src="video.mp4" type="video/mp4">
</video>
<div class="barrage">
<div class="barrage-item">这是一条弹幕1</div>
<div class="barrage-item">这是一条弹幕2</div>
<div class="barrage-item">这是一条弹幕3</div>
<div class="barrage-item">这是一条弹幕4</div>
<div class="barrage-item">这是一条弹幕5</div>
</div>
</div>
</div>
</body>
</html>
阅读全文
相关推荐














