純粋な CSS3 Android スタイルのボタンクリック波形効果

簡単なチュートリアル

css-ripple-effect は、純粋な CSS3 を使用して作成されたクールなフラット スタイルのボタン クリック リップル エフェクトです。この効果は、Android システムのマテリアル デザイン スタイルのクリック ウェーブをモデル化しています。

使用方法

ripple.css ファイルをページに導入します。

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

HTML 構造

要素の clickwave 効果を作成するには、それに ripple クラスを追加するだけです。

<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 中国語 Web サイト (www.php.cn) に注目してください。