我要评论
- div 鼠标以及滚轮
<div class="mouse-icon">
<div class="scroll"></div>
</div>
- 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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论