微信小程序按鈕點擊動畫效果的實現(xiàn)
動畫效果如下:
GIF看起來可能會有點卡
wxml
<view class="confirm bubble">確定</view>
wxss
.confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{ position: relative; overflow: hidden; } .bubble:after{ content: ""; background: #999; position: absolute; width: 750rpx; height: 750rpx; left: calc(50% - 375rpx); top: calc(50% - 375rpx); opacity: 0; margin: auto; border-radius: 50%; transform: scale(1); transition: all 0.4s ease-in-out; } .bubble:active:after { transform: scale(0); opacity: 1; transition: 0s; }
總結(jié)
以上所述是小編給大家介紹的微信小程序按鈕點擊動畫效果的實現(xiàn),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(包括按鈕角標的實現(xiàn))
- 微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
- 微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
- 微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼
- 微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
- 操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄功能
- 微信小程序mpvue點擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點擊按鈕退出小程序的實現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
electron的webview和內(nèi)嵌網(wǎng)頁通信的方法
在 Electron 的世界里,webview 標簽相當于一個小盒子,里面可以裝一個完整的網(wǎng)頁,就像一個迷你瀏覽器,這篇文章主要介紹了electron的webview和內(nèi)嵌網(wǎng)頁如何通信,需要的朋友可以參考下2024-04-04HTML+JavaScript實現(xiàn)筋斗云導(dǎo)航欄效果
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實現(xiàn)筋斗云導(dǎo)航欄效果,當鼠標經(jīng)過某個li,筋斗云跟著到當前的位置,感興趣的小伙伴可以試一試2022-03-03JavaScript模擬實現(xiàn)"雙11"限時秒殺效果
每年的“雙11”啊,都是大家的剁手節(jié)。大家都在晚上12點,捧著手機看著倒計時,在他倒數(shù)到0的時候瘋狂點擊下單??墒悄阌袥]想過限時秒殺是怎么實現(xiàn)的呢?本文將為你揭秘如何用JavaScript實現(xiàn)限時秒殺,快來了解一下吧2022-03-03關(guān)于 byval 與 byref 的區(qū)別分析總結(jié)
關(guān)于 byval 與 byref 的區(qū)別分析總結(jié)...2007-10-10淺談js使用in和hasOwnProperty獲取對象屬性的區(qū)別
下面小編就為大家?guī)硪黄獪\談js使用in和hasOwnProperty獲取對象屬性的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01一文搞懂JSON(JavaScript Object Notation)
Json 有兩種基本的結(jié)構(gòu),即 Json對象 和 Json 數(shù)組。通過 Json 對象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu),今天通過本文給大家介紹JavaScript Object Notation的基本知識,感興趣的朋友一起看看吧2021-10-10