純CSS3 Android樣式按鈕點擊波特效

簡短教學

css-ripple-effect是一款使用純CSS3製作的酷炫扁平風格按鈕點擊波特效。此效果是仿照Android系統的Material design風格點擊波來製作的。

使用方法

在頁面中引入ripple.css檔案。

<link href="ripple.css" rel="stylesheet">

HTML結構

要為一個元素製作點擊波特效，只需為它添加ripple class類別即可。

<button type="button" class="ripple" >Primary</button>

登入後複製

CSS樣式

你可以透過ripple.css檔案或ripple.less檔案來修改點擊波效果的樣式。

.ripple {
  position: relative;
  overflow: hidden;
  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }
  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }
}

登入後複製

以上就是純CSS3 Android樣式按鈕點擊波特效的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！