建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
Vue實(shí)現(xiàn)PC端靠邊懸浮球的方法
這篇文章主要講解了Vue實(shí)現(xiàn)PC端靠邊懸浮球的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
防城港網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,防城港網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為防城港近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的防城港做網(wǎng)站的公司定做！
我想把退出登錄的按鈕做成一個(gè)懸浮球的樣子，帶動(dòng)畫(huà)的那種。
實(shí)現(xiàn)是這個(gè)樣子：
手邊沒(méi)有球形圖。隨便找一個(gè)，功能這里演示的為單機(jī)懸浮球注銷(xiāo)登錄
嗯，具體代碼：
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;
}
}看完上述內(nèi)容，是不是對(duì)Vue實(shí)現(xiàn)PC端靠邊懸浮球的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱：Vue實(shí)現(xiàn)PC端靠邊懸浮球的方法
網(wǎng)站地址：http://www.ef60e0e.cn/article/jicpjp.html
