13518219792
这篇文章主要讲解了Vue实现PC端靠边悬浮球的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
防城港网站建设公司创新互联公司,防城港网站设计制作，有大型网站制作公司丰富经验。已为防城港近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的防城港做网站的公司定做！
我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。
实现是这个样子：
手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录
嗯，具体代码：
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端靠边悬浮球的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
