フェイクユーザーカーソル
こんなん動くやつ
静止
code:style.css
:not(.cursor-line) > .text .deco-\> {
/* display: block; */
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
opacity: .7;
}
:not(.cursor-line) > .text .deco-\>::after {
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
@keyframes cursor_move {
20% {
left: 0px;
}
20.1% {
left: 15px;
}
40% {
left: 15px;
}
40.1% {
left: 30px;
}
60% {
top: 0px;
}
60.1% {
top: 28px;
}
80% {
left: 30px;
}
80.1% {
left: 120px;
}
100% {
left: 120px;
}
100.1% {
left: 300px;
}
}
.deco-\>.deco-\| {
animation-name: cursor_move;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}