Vue实现PC端靠边悬浮球的代码
程序员文章站
2022-06-25 12:45:07
我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。实现是这个样子：手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录嗯，具体代码：
我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。
实现是这个样子：
手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录
嗯，具体代码：
<div
:class="['meun-switch animated flex-row',uploadflag ? 'active rubberband off' : 'leave jello']"
@mouseleave="uploadleave"
@mouseenter="uploadenter"
v-if="uploadshow"
@click.stop="logout"
>
<img :src="require('@/assets/1.png')"/>
</div>
data
uploadshow: false,
uploadflag: true,
js方法
uploadenter() {
this.uploadflag = true;
},
uploadleave() {
this.uploadflag = false;
},
uploadanimated() {
settimeout(() => {
this.uploadshow = true;
settimeout(() => {
this.uploadleave();
}, 1000);
}, 1000);
},
css
.off{
-webkit-animation:1s seconddiv;
background: transparent;
}
@keyframes seconddiv{
0% {transform: scale(1.4,1.4);}
10% {transform: scale(1,1);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(1,1);}
70% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);}
}
.meun-switch {
position: fixed;
top: 90px;
left: 0px;
z-index: 2001;
cursor: pointer;
width: 150px;
height: 150px;
padding: 5px;
transition: all 0.25s;
&.leave {
left: -65px;
}
&.active {
left: 0;
}
&:hover {
transform: scale(1.02);
}
img {
width: 120px;
height: 120px;
}
}
总结
到此这篇关于vue实现pc端靠边悬浮球的代码的文章就介绍到这了,更多相关vue靠边悬浮球内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！