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

NickZhou 發(fā)布于2019-08-20 17:15 / 1194人閱讀

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

最近想要在按鈕上添加material design的點擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內(nèi)容覺得不劃算，然后自己動手造了個輪子。
項目地址：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ù)則為自動計算
color	水波紋顏色默認(rèn)為：rgba(0, 0, 0, 0.3)
time	animation的時間默認(rèn)為：0.5s
MaxNum	水波紋的最大數(shù)量默認(rèn)為：5
center	水波紋的圓心。默認(rèn)為：false
zIndex	設(shè)置z-index 默認(rèn)為：null,當(dāng)水波紋被覆蓋時，可以使用此參數(shù)

相關(guān)文章

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

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

tolerious 2019-08-29 12:46 評論0 收藏0
原生js+css 實現(xiàn) material design 點擊效果

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

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

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

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

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

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

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

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