微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn)

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

這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

動(dòng)畫(huà)效果如下：

在這里插入圖片描述

GIF看起來(lái)可能會(huì)有點(diǎn)卡

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é)

以上所述是小編給大家介紹的微信小程序按鈕點(diǎn)擊動(dòng)畫(huà)效果的實(shí)現(xiàn),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

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