CSS 光標閃 豎杠

/* 豎杠樣式 */
.vertical-bar {
display: inline-block;
width: 1px;
height: 1.2em;
margin-left: -1px;
vertical-align: middle;
animation: blink 1s infinite;
}
@keyframes blink {
50% {
background-color: transparent;
}
}
/* 光標樣式 */
.cursor {
display: inline-block;
width: 0.2em;
height: 1.2em;
margin-left: -0.1em;
background-color: black;
vertical-align: middle;
animation: blink 1s infinite;
}

在實現代碼編輯器的時候，光標和豎杠是很重要的組成部分。通過 CSS 可以簡單地實現一個光標和豎杠的效果。

豎杠的樣式使用display: inline-block;使其能夠和字符處于同一行，并通過width屬性設置豎杠的寬度，然后使用height屬性設置其高度，而margin-left: -1px;則是為了讓豎杠向左偏移 1 個像素，以便和字符之間出現間隙。豎杠的閃爍效果則是通過 animation 來實現的。

而光標的樣式和豎杠類似，只是將豎杠的寬度調整為 0.2em，并且使用黑色背景色來實現光標的效果。同樣，光標的閃爍效果也是通過 animation 來實現的。

將光標和豎杠作為一個 div 元素組合起來，就可以實現類似代碼編輯器的效果：

<div>
<span>function myFunction() {</span>
<span class="vertical-bar"> </span>
<span class="cursor"> </span>
<span>}</span>
</div>

通過以上代碼，就可以在頁面中實現一個包含光標和豎杠的代碼框。需要注意的是，兼容性可能存在一些問題，因此在使用時需要進行測試和兼容性處理。