从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要讲解了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端靠边悬浮球的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图