首页用html 和css做一个视频弹幕效果

用html 和css做一个视频弹幕效果

时间: 2024-05-27 22:14:22 浏览: 215

<!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>

阅读全文