幽灵资源网 Design By www.bzswh.com
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种。
实现是这个样子:
手边没有球形图。随便找一个,功能这里演示的为单机悬浮球注销登录
嗯,具体代码:
<div :class="['meun-switch animated flex-row',uploadflag " @mouseleave="uploadleave" @mouseenter="uploadenter" v-if="uploadShow" @click.stop="logout" > <img :src="/UploadFiles/2021-04-02/1.png')">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; } }总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...