欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 鼠标滚轮滚动样式

程序员文章站 2022-08-17 09:24:54
div 鼠标以及滚轮
scss样式.mouse-icon { position: absolute; border: 2px solid #2f2f2f; background: #ffffff; opacity: 0.8; border-radiu.....

css 鼠标滚轮滚动样式

  1. div 鼠标以及滚轮
      <div class="mouse-icon">
        <div class="scroll"></div>
      </div>
  1. 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