マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文

こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。

これは、Google Material Designで最も一般的な特殊効果です。この特殊効果をシミュレートするための既製の js ライブラリも市場に多数あります。ただし、多くのjscssを導入する必要があることがよくあります。実際、既存のプロジェクトでは、ユーザーエクスペリエンスを向上させるために、このようなボタンを追加するだけになる場合があります。これらのjsライブラリは少し大きすぎるようです。同時に、 jsによって実装されているため、読み込みの問題に注意を払う必要があることがよくあります。

では、 cssを使用してこの効果を実現する方法はあるのでしょうか?

アイデア

実際、これはアニメーションであり、完全な円が小さいものから大きいものへと成長します。これはcss3のアニメーションを使用して簡単に実現できます。

サンプルコード

@keyframes リップル{
    から {
        変換: スケール(0);
        不透明度: 1;
    }
    に {
        変換: スケール(1);
        不透明度: 0;
    }
}

jsを使用してこれを実装する方法は通常非常に簡単で、クリック要素にclassを追加し、アニメーションが終了したらclassを削除します。

サンプルコード

var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
  addClass(btn,'アニメーション')
}、間違い)
btn.addeventlistener('transitionend',function(){//CSS3 アニメーションの終了をリッスンします。removeClass(btn,'animate')
}、間違い)

では、CSS を通じてアニメーションをトリガーするにはどうすればよいでしょうか?

CSS実装

cssでマウスを操作する擬似クラスは主に

  • マウスをhover
  • :activeマウスが押されました
  • :focusマウスフォーカス
  • :checkedマウスが選択されました

多くの場合、ページ上の効果はhoverによって実現されます。ページ上にマウスを置くと効果がトリガーされ、ページを離れると効果が復元されます。ただし、ページにマウスを置いた直後にページを離れると、アニメーションはすぐに終了します。

まずは試してみましょう。

構造

これは私たちが書いたページの構造とスタイルです

<スタイル>
.btn{ 
  表示: ブロック; 
  幅: 300ピクセル; 
  アウトライン: 0; 
  オーバーフロー: 非表示;  
  位置: 相対的; 
  遷移: .3秒; 
  カーソル: ポインタ; 
  ユーザー選択: なし; 
  高さ: 100px; 
  テキスト配置: 中央; 
  行の高さ: 100px; 
  フォントサイズ: 50px; 
  背景:トマト; 
  色: #fff;  
  境界線の半径: 10px;
}
</スタイル>
<a class="btn">ボタン</a>

非常にシンプルで、普通のボタンスタイルです

次に、ボタンに必要な完全な円を追加します。

これを実現するために疑似要素を使用します

.btn:後{
    コンテンツ: '';
    位置: 絶対;
    幅: 100%;
    パディング上部: 100%;
    背景: 透明;
    境界線の半径: 50%;
    左: 50%;
    上位: 50%;
    変換: translate(-50%,-50%)
}

上にoverflow: hidden削除し、円を縮小して効果を確認しましょう。

次に、スケーリングアニメーションを作成します

@keyframes リップル{
    から {
        変換: translate(-50%,-50%) スケール(0);
        /** 変換属性はデフォルトで記述されているので、ここで translate(-50%,-50%) を追加する必要があります。そうしないと、置き換えられてしまいます**/
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}

ホバー小さなインタラクティブ体験

マウスをかざしてみますか?

.btn:hover:after{
  アニメーション: リップル 1 秒;
} 

効果は良いのですが、マウスを速く動かしすぎると、拡大した円がすぐに縮小してしまうので、少し不安定です。

しかし、これは私たちが望んでいる効果ではありません。私たちが望んでいるのは、単にそこに置いて二度とトリガーされないようにするのではなく、クリックごとに 1 回トリガーされることです。

アクティブトライ

日常業務では、 activeはクリック効果などによく使用されるので、ぜひ試してみてはいかがでしょうか。

.btn:active:after{
  アニメーション: リップル 1 秒;
} 

効果も不十分で、マウスを押したままにしているのと少し似ていて、完全にトリガーするにはマウスを押したままにする必要があります。たとえば、上記の例では、アニメーションは1s実行されるため、完全なアニメーション効果を確認するには、ボタンを1sクリックする必要があります。そうしないと、上記のマウスが離れるのと同じように、アニメーションはすぐに縮小されます。

フォーカスエクスペリエンス

任意の要素にフォーカスを当てる必要がある場合は、その要素にtabindex属性を割り当てることができます。

<a class="btn" tabindex="1">ボタン</a>
.btn:focus:after{
  アニメーション: リップル 1 秒;
} 

foucsも発動できるが、フォーカスを失った後にのみ再度発動できる。実際の操作は、一度クリックした後、外側の空白部分を再度クリックする。

解決策はないのでしょうか?

もちろんいくつかあります。最後のが間違いなく解決策です、ハハハ

チェック済み

checked直接トリガーできません。フォーム要素が選択された後にトリガーされます。このため、ページ構造を変更する必要があります。

<ラベルクラス="btn">
  <input type="checkbox"><span>ボタン</span>
</ラベル>

ここではlable変更し、 input[type=checkbox]タグを含めました。これは主に、ボタンがクリックされたときにinput選択をトリガーするためです。

スタイルを追加する

.btn>span:after{
  /**セレクタを変更する**/
}
.btn>入力[type=チェックボックス]{
  表示: なし
}
.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップル 1 秒;
}

これによってアニメーションをトリガーすることもできますが、問題は、もう一度クリックすると選択が解除されることです。アニメーションをトリガーするにはどうすればよいでしょうか?

実際、それは:not

.btn>input[type=checkbox]:not(:checked)+span:after{
  アニメーション: リップル 1 秒;
}

一見すると、かなり巧妙に思えますが、よく考えてみると、表裏両方にアニメーションが書かれているので、 :checkedとは何の関係もないのではないでしょうか?直接行く方が良い

.btn>input[type=checkbox]+span:after{
  アニメーション: リップル 1 秒;
}

無限サイクル…

この問題は長い間私を悩ませてきましたが、神は一生懸命働く人を失望させません。その後、2つの状態で異なるアニメーションをトリガーしようとしましたが、次のように個別にトリガーできます。

.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップル1 1秒;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
  アニメーション: リップル2 1秒;
}

これは簡単に理解できるはずです。

さて、ここからがポイントです。ripple1 とripple1 ripple2アニメーション プロセスを同じに変更すると、別々にトリガーできるようになります。つまり、アニメーション名が異なっている限り、CSS はそれらを異なるアニメーションとして扱います。

これは非常に簡単です。デフォルトの状態を設定し、状態を選択して、異なる名前のアニメーションをトリガーするだけです。

.btn>input[type=checkbox]+span:after{
  アニメーション: リップルイン 1 秒;
}
.btn>input[type=checkbox]:checked+span:after{
  アニメーション: リップルアウト 1 秒;
}
@keyframes リップルイン{
    から {
        変換: translate(-50%,-50%) スケール(0);
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}
@keyframes ripple-out{/*名前だけが異なります*/
    から {
        変換: translate(-50%,-50%) スケール(0);
        背景: rgba(0,0,0,.25);
    }
    に {
        変換: translate(-50%,-50%) スケール(1);
        背景: 透明;
    }
}

効果は記事の冒頭で示した通り、完璧です

完全なデモは次のとおりです

https://codepen.io/xboxyan/pen/Jmvyex/

いくつかの欠点

上記のアニメーション スタイルはデフォルトでトリガーされるため、ページが読み込まれるとボタン上の水滴アニメーションが 1 回移動するのがわかりますが、特に目立つわけではなく、受け入れられるものではありません。

第二に、実際の効果は、マウスがクリックされたポイントから広がるはずです。私たちの CSS では、これは確かにできず、中心から広がることしかできず、これも妥協点です。ここでアイデアがあります。CSS cssを使用して、クリックするたびにstyleに対応する値を保存し、 cssでも使用できるようにします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

>>:  Vueは書籍ショッピングカートの機能を実現

推薦する

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...

グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例

この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

HTMLの基礎 HTMLの構造

HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...

Xftp のダウンロードとインストールのチュートリアル (グラフィック チュートリアル)

Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

Docker を使用した ELK7.3.0 ログ収集サービスの導入に関するベスト プラクティス

最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

Linux で見つけるためのフレンドリーな代替手段 (fd コマンド)

fd コマンドは、Linux ファイル システムを検索するためのシンプルで簡単な方法を提供します。...

CSSスタイルとセレクターの使い方

HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...

Docker 上で Redis クラスターを構築する

目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...