マテリアルデザインで水滴アニメーションボタンを実現するための純粋な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は書籍ショッピングカートの機能を実現

推薦する

Linux usermod コマンドの使用

1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...

JavaScriptの詳細な分析と方向の変更方法

目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...

将来人気が出るであろういくつかのナビゲーション方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

CentOS のクローン作成、Linux 仮想マシンの共有の完全な手順

序文Linux が完全にセットアップされると、クローン機能を使用して短時間で複数の Linux を作...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

sqlite3 から mysql に移行するときに起こりうる問題のコレクション

簡単な説明適切な読者: モバイル開発sqlite3 データを mysql に移行する場合、多くの構文...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...