这篇文章主要讲解了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端靠边悬浮球的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
