css 鼠标滚轮滚动样式

1. div 鼠标以及滚轮

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

2. scss样式

	.mouse-icon {
    position: absolute;
    border: 2px solid #2f2f2f;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 13px;
    height: 35px;
    width: 25px;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 100;
    .scroll {
      animation-name: scrolling;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-play-state: running;
      position: relative;
      border-radius: 10px;
      background: #2f2f2f;
      width: 4px;
      height: 8px;
      top: 4px;
      margin-left: auto;
      margin-right: auto;
    }
    @keyframes scrolling {
      0% {
        top: 2px;
        opacity: 0;
      }
      30% {
        top: 8px;
        opacity: 1;
      }
      100% {
        top: 16px;
        opacity: 0;
      }
    }
  }

本文地址：https://blog.csdn.net/weixin_46329969/article/details/109383025