微信小程序按鈕點擊動畫效果的實現(xiàn)

更新時間：2019年09月04日 10:51:40 作者：CodeHunter_qcy

這篇文章主要介紹了微信小程序按鈕點擊動畫效果的實現(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),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

jquery的.click()點擊事件為什么無效，on('click',function())如何使
jquery的.click()點擊事件,通常都是可以正常使用的,有時選中的選擇器被點擊時無法觸發(fā)回調(diào)函數(shù),這是為什么呢？改成on綁定click就可以了嗎？面對這樣的情況,on('click',function())應(yīng)該如何使用？
2023-08-08
ES6 迭代器 Iterator使用總結(jié)
ES6引入了Iterator（迭代器）接口,用于順序訪問可迭代對象,Iterator接口提供統(tǒng)一的訪問接口,并通過for...of循環(huán)供消費,本文給大家介紹ES6 迭代器 Iterator使用總結(jié),感興趣的朋友跟隨小編一起看看吧
2025-02-02
el-table動態(tài)渲染列、可編輯單元格、虛擬無縫滾動的實現(xiàn)
vue對數(shù)據(jù)處理很常見,本文主要介紹了對el-table組件二次封裝,包括對el-table的動態(tài)渲染、單元格編輯；對于無縫滾動的實現(xiàn),優(yōu)化大數(shù)據(jù)量下的頁面卡頓問題,感興趣的可以了解一下
2023-12-12
bootstrap手風琴折疊示例代碼分享
這篇文章主要為大家詳細介紹了bootstrap手風琴折疊示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
javascript中select下拉框的用法總結(jié)
這篇文章主要為大家介紹了javascript中select下拉框的用法，select在開發(fā)中經(jīng)常被用到，用于進行選項選擇,需要的朋友可以參考下
2016-01-01
url 特殊字符傳遞參數(shù)解決方法
有些符號在URL中是不能直接傳遞的，如果要在URL中傳遞這些特殊符號，那么就要使用他們的編碼了。下表中列出了一些URL特殊符號及編碼。
2010-01-01
ES6 Class中實現(xiàn)私有屬性的一些方法總結(jié)
這篇文章主要給大家介紹了關(guān)于ES6 Class中實現(xiàn)私有屬性的一些方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-07-07
javascript最基本的函數(shù)匯總
這篇文章主要給大家匯總介紹了javascript最基本的7個函數(shù)，十分的實用，有需要的小伙伴可以參考下。
2015-06-06
JS/jQuery判斷DOM節(jié)點是否存在的簡單方法
下面性價比就為大家?guī)硪黄狫S/jQuery判斷DOM節(jié)點是否存在的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起小編過來看看吧
2016-11-11
JavaScript本地存儲與會話存儲的實現(xiàn)介紹
本地存儲和會話存儲是比較常用的方法，你知道兩者的區(qū)別嗎，本文詳細的介紹了JavaScript中本地存儲(LocalStorage)和會話存儲(SessionStorage)的使用，具有一定的參考價值，感興趣的可以了解一下
2022-08-08