我想把退出登錄的按鈕做成一個懸浮球的樣子，帶動畫的那種。

實現是這個樣子：

手邊沒有球形圖。隨便找一個，功能這里演示的為單機懸浮球注銷登錄

嗯，具體代碼：

<div :@mouseleave='uploadleave' @mouseenter='uploadenter' v-if='uploadShow' @click.stop='logout' > <img :src='http://www.aoyou183.cn/bcjs/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靠邊懸浮球內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！