1. 程式人生 > >ionic-css3實現點選水波漣漪的觸覺效果

ionic-css3實現點選水波漣漪的觸覺效果

這兩天有時間就繼續在ionic的框架上利用angularjs實現一些在app中經常用到的觸覺漣漪效果,基於material design,給人友好互動感覺。

一、點選一些在頭部或者底部的圖示時。產生漣漪觸覺效果

demo:


可以清楚看到,點選圖示時將產生一種漣漪水紋效果,給人一種觸覺,而且對於這種小的圖示或者按鈕,直接用圓形水紋漣漪,這也是material design中推薦的。

二、對於一些list項或者item項,也可以使用漣漪效果

demo:


當點選的時候,首先要獲取點選點在哪裡,然後以該點為中心產生漣漪。漣漪會蔓延至整個item,互動時會給人一種視覺和觸覺的良好體驗。