這次要來寫的是指示滑鼠下滑的效果
用 css 畫出代表滑鼠的圓角矩形跟代表滾輪的圓點
針對圓點做位移及透明度的調整
一樣把基本架構寫好

<div class="centered">
  <div class="mouse-scroll"></div>
</div>

然後設定好基本的 css
這次的 css 都是常見的屬性，沒什麼困難處

body {
  background: #232323;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mouse-scroll {
  width: 36px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px;
}

.mouse-scroll:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 10px;
  margin: auto;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  animation: scroll-ani 1s linear infinite;
}

然後把動畫效果寫進來

@keyframes scroll-ani {
  0% {
    top: 10px;
    opacity: 0.8;
  }
  100% {
    top: 25px;
    opacity: .1;
  }
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/EdrEQQ