原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

tolerious 發(fā)布于2019-08-29 12:46 / 2467人閱讀

摘要：最近想要在按鈕上添加的點(diǎn)擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。項(xiàng)目地址上傳不了圖只能用了效果使用文字只要在內(nèi)添加并且在內(nèi)傳入便可以實(shí)現(xiàn)水波紋效果。

最近想要在按鈕上添加material design的點(diǎn)擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。
項(xiàng)目地址：github

上傳不了gif圖只能用 JSFiddle了： JSFiddle效果

Import using script tag

使用

    new Ripple({
            cName: "md-button",
            color: "red",
            time: "0.5s",
            MaxNum: 5
        })

只要在

Option	Description
cName	element的className，默認(rèn)為 "md-button"
r	水波紋最小半徑，不傳此參數(shù)則為自動計(jì)算
color	水波紋顏色默認(rèn)為：rgba(0, 0, 0, 0.3)
time	animation的時(shí)間默認(rèn)為：0.5s
MaxNum	水波紋的最大數(shù)量默認(rèn)為：5
center	水波紋的圓心。默認(rèn)為：false
zIndex	設(shè)置z-index 默認(rèn)為：null,當(dāng)水波紋被覆蓋時(shí)，可以使用此參數(shù)

相關(guān)文章

原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

摘要：最近想要在按鈕上添加的點(diǎn)擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。項(xiàng)目地址上傳不了圖只能用了效果使用文字只要在內(nèi)添加并且在內(nèi)傳入便可以實(shí)現(xiàn)水波紋效果。最近想要在按鈕上添加material design的點(diǎn)擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。項(xiàng)目地址：gith...

NickZhou 2019-08-20 17:15 評論0 收藏0
原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

摘要：最近想要在按鈕上添加的點(diǎn)擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。項(xiàng)目地址上傳不了圖只能用了效果使用文字只要在內(nèi)添加并且在內(nèi)傳入便可以實(shí)現(xiàn)水波紋效果。最近想要在按鈕上添加material design的點(diǎn)擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個(gè)輪子。項(xiàng)目地址：gith...

why_rookie 2019-08-01 16:58 評論0 收藏0
‘純css實(shí)現(xiàn)Material Design中的水滴動畫按鈕’的js體驗(yàn)優(yōu)化

摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動畫，但是有一些瑕疵，文章結(jié)尾處也提到過，一是頁面加載進(jìn)來就會看到按鈕上的水滴動畫運(yùn)動一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來擴(kuò)散，今天我們來解決這個(gè)問題。前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動畫，但是有一些瑕疵，文章結(jié)尾處也提到過，一是頁面加載進(jìn)來就會看到按鈕上的水滴動畫運(yùn)動一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來擴(kuò)散，今...

genefy 2019-08-29 17:02 評論0 收藏0
‘純css實(shí)現(xiàn)Material Design中的水滴動畫按鈕’的js體驗(yàn)優(yōu)化

摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動畫，但是有一些瑕疵，文章結(jié)尾處也提到過，一是頁面加載進(jìn)來就會看到按鈕上的水滴動畫運(yùn)動一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來擴(kuò)散，今天我們來解決這個(gè)問題。前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動畫，但是有一些瑕疵，文章結(jié)尾處也提到過，一是頁面加載進(jìn)來就會看到按鈕上的水滴動畫運(yùn)動一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來擴(kuò)散，今...

xiaoqibTn 2019-08-23 12:28 評論0 收藏0
純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

摘要：插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標(biāo)結(jié)合使用，對原生的和進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動畫效果。支持的圖標(biāo)庫有安裝可以使用，或來安裝。插件介紹 pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標(biāo)結(jié)合使用，對原生的checkbox和radio進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動畫效果。 showImg(...

eechen 2019-08-30 15:44 評論0 收藏0