scrollダウン

html

<div class="scroll">
 <p class="scroll__text">scroll</p>
 <div class="scroll__ball"></div>
</div>

css

.scroll {
 position: absolute;
 right: 0;
 bottom: 0;
 writing-mode: vertical-rl;
 letter-spacing: .2em;
}

.scroll__text p {
 font-size: 14px;
}

.scroll__ball {
 background: #E7E7E7 ;
 width: 1px;
 height: 150px;
 position: absolute;
 right: 0;
 bottom: -90px;
}

.scroll__ball::before {
 content: '';
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background-color: #00608D ;
 position: absolute;
 top: 0;
 left: -2px;
 -webkit-animation: arrow 2.5s ease 0s infinite normal;
 animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
 0% {
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
 }

 100% {
   -webkit-transform: translateY(150px);
   transform: translateY(150px);
 }
}

画面内の録画分らんかった！すまん！

positionとかは自分でいいよう調整してください！このまま使うとおかしくなるから！

こんな感じでまるポチが上から下に動くようになります！

マネしたい方はぜひ！

あ！このコードキモイとかそういう文句あるひとは＠kota12380196まで！