我想把退出登錄的按鈕做成一個(gè)懸浮球的樣子，帶動(dòng)畫的那種。

實(shí)現(xiàn)是這個(gè)樣子：

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

嗯，具體代碼：

<div :@mouseleave='uploadleave' @mouseenter='uploadenter' v-if='uploadShow' @click.stop='logout' > <img :src='http://www.lshqa.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; } }

總結(jié)

到此這篇關(guān)于Vue實(shí)現(xiàn)PC端靠邊懸浮球的代碼的文章就介紹到這了,更多相關(guān)Vue靠邊懸浮球內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！