豎向彈幕是一種在網頁上顯示滾動文字的效果，目前在B站等視頻網站上廣泛使用。豎向彈幕css就是一種實現豎向彈幕效果的css樣式。下面介紹一下如何使用豎向彈幕css。

首先需要在html中創建一個父容器，用于包裹彈幕元素。通過設置父容器的樣式，可以控制彈幕的寬度、高度和位置。例如：

<div class="danmu-wrap"></div>
.danmu-wrap {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}

上述代碼創建了一個寬高為100%的全屏父容器，并將其定位到左上角。這個父容器使用了overflow:hidden屬性，可以隱藏超出容器范圍的彈幕。

接下來需要創建具體的彈幕元素，可以使用ul、li或div等html元素。彈幕的內容可以是文字、圖片或視頻等。下面以li為例：

<ul class="danmu-list">
<li>這是一條彈幕</li>
<li>這是另一條彈幕</li>
</ul>
.danmu-list li {
position: absolute;
bottom: 0;
left: 0;
white-space: nowrap;
}

上述代碼創建了一個ul列表，并在其中創建了兩個li元素作為彈幕。彈幕的樣式使用了position:absolute屬性，將其定位到底部左側。由于是豎向彈幕，需要使用white-space:nowrap屬性禁止彈幕換行。

最后是使用JavaScript實現彈幕滾動的代碼。下面給出一個簡單的實現：

let danmuList = document.querySelector('.danmu-list');
let danmuItems = danmuList.querySelectorAll('li');
let danmuCount = danmuItems.length;
let danmuHeight = danmuList.offsetHeight / danmuCount;
let danmuTop = 0;
for (let i = 0; i < danmuCount; i++) {
danmuItems[i].style.top = danmuTop + 'px';
danmuTop += danmuHeight;
}
setInterval(function() {
for (let i = 0; i< danmuCount; i++) {
let danmuItem = danmuItems[i];
let danmuTop = parseFloat(danmuItem.style.top);
danmuTop = danmuTop - 1;
if (danmuTop < -danmuHeight) {
danmuTop = (danmuCount - 1) * danmuHeight;
}
danmuItem.style.top = danmuTop + 'px';
}
}, 10);

上述代碼先計算出彈幕元素的高度和總數量，然后使用循環為每個彈幕元素設置初始位置。接著使用setInterval函數實現彈幕的滾動。每間隔一定時間，依次將每個彈幕元素的位置向上移動一個彈幕元素的高度，如果彈幕移出父容器的范圍，則將其位置重置到最下面。

通過以上步驟，就可以實現一個簡單的豎向彈幕效果。需要注意的是，彈幕的滾動速度、字體顏色、字體大小等樣式可以根據自己的需求進行調整。此外，彈幕還可以應用到更多的場景中，如評論區、消息提示等。