Vue实现PC端靠边悬浮球的代码
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue实现靠边悬浮球(PC端)效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。
实现是这个样子：
手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录
嗯，具体代码：
<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靠边悬浮球内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！