css 鼠标滚轮滚动样式
程序员文章站
2022-08-17 09:24:54
div 鼠标以及滚轮
scss样式.mouse-icon { position: absolute; border: 2px solid #2f2f2f; background: #ffffff; opacity: 0.8; border-radiu.....- 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
上一篇: 朱元璋一生中最对不起的女人是谁?