這篇文章主要講解了Vue實現PC端靠邊懸浮球的方法,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
防城港網站建設公司創新互聯公司,防城港網站設計制作,有大型網站制作公司豐富經驗。已為防城港近1000家提供企業網站建設服務。企業網站搭建\成都外貿網站建設要多少錢,請找那個售后服務好的防城港做網站的公司定做!
我想把退出登錄的按鈕做成一個懸浮球的樣子,帶動畫的那種。
實現是這個樣子:
手邊沒有球形圖。隨便找一個,功能這里演示的為單機懸浮球注銷登錄
嗯,具體代碼:
<div :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']" @mouseleave="uploadleave" @mouseenter="uploadenter" v-if="uploadShow" @click.stop="logout" > <img :src="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實現PC端靠邊懸浮球的方法
文章分享:http://m.newbst.com/article28/jicpjp.html
成都網站建設公司_創新互聯,為您提供外貿建站、網頁設計公司、網站設計公司、網站策劃、網站改版、網站營銷
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯