css技巧系列之(三)鼠标滚轮动画

在前端开发中常常会有一些提示效果，例如

实现思路： 使用 animation 来模拟鼠标的滚轮滚动的小动画。 适用于提示页面可以滚动、滚动查看更多内容等页面场景

源码：

  .bg {
     width: 100%;
     height: 100vh;
     background-color: pink;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .cursor {
     width: 40px;
     height: 60px;
     border: 3px solid #333333;
     border-radius: 20px;
     box-sizing: border-box;
     position: relative;
   }
   .animation-box {
     width: 6px;
     height: 14px;
     display: block;
     position: absolute;
     top: 6px;
     left: 14px;
     background-color: #333333;
     border-radius: 3px;
     animation: moveeff 2s ease-in-out infinite;
   }
   @keyframes moveeff {
     0% {
       top: 6px;
     }
     50% {
       top: 16px;
     }
     100% {
       top: 6px;
     }
   }

HTML

  <div class="bg">
   <div class="cursor">
     <span class="animation-box"></span>
   </div>
 </div>

前端效果多积累遇到时，可以有印象，避免出现，急用时再去寻找。如喜欢关注。