彈幕是一種常見的網頁特效，在許多視頻播放頁面上都可以看到。在HTML和CSS中，實現彈幕效果的代碼并不是很復雜。以下是一個簡單的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS彈幕示例</title>
</head>
<body>
<div class="container">
<div class="danmu">這是一條彈幕！</div>
</div>
<style>
.container {
position: relative;
width: 400px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.danmu {
position: absolute;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-size: 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 20px;
animation: move 10s linear forwards;
}
@keyframes move {
0% { left: 100%; }
100% { left: -100%; }
}
</style>
</body>
</html>上述代碼中，我們利用了CSS中的position屬性和animation動畫來實現彈幕效果。其中，container類是彈幕容器，danmu類是彈幕本身。danmu的position屬性被設置為絕對定位，top和transform屬性的值讓彈幕始終在容器中間位置。我們用white-space屬性保證了彈幕不會換行，用background-color和border-radius屬性美化了彈幕的樣式。
最重要的是，我們在danmu的animation屬性中定義了一個名為“move”的動畫，使彈幕可以從右邊緩緩滑入，經過一定時間后滑出屏幕，通過設置animation的forwards屬性使動畫結束后彈幕保持在屏幕最左側不消失。
由此可見，在HTML和CSS中利用position和animation屬性實現彈幕效果的代碼并不難，只需要細心調整各項屬性的值，便能完成一個讓用戶喜愛的彈幕特效。
下一篇過濾器排除css