Vue实现PC端靠边悬浮球的代码

这篇文章主要介绍了Vue实现靠边悬浮球(PC端)效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借

这篇文章主要介绍了Vue实现靠边悬浮球(PC端)效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种。

实现是这个样子:

手边没有球形图。随便找一个,功能这里演示的为单机悬浮球注销登录

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

嗯,具体代码:

<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=”https://www.wpmee.com/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靠边悬浮球内容请大家以后多多支持!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7090.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注