CSSマスクを使用して気分を変えるアニメーションを作成した方法

子供の頃に見た漫画を覚えていますか？ 当時、彼らはアニメーションの擬人化でした。 今やアニメーションは漫画だけではなく、ほぼ毎日、電話をチェックしたり、画面を備えたデバイスを使用して出会います。

今日、アニメーションは注目を集めるためだけでなく、ユーザーの操作を改善し、ナビゲーションを容易にするためにも使用されています。 優れたデザインでは、アニメーションが全体的なコンセプトと組み合わされるように追加され、それにより便利なユーザーインターフェイスが作成されます。



この記事では、さまざまな表現で顔の簡単なアニメーションを作成し、その過程でCSSについて少し学びます。

さあ始めましょう

Web開発者はめったに使用しませんが、デザイナーがよく使用するCSSテクニックを使用します。 これはマスキングと呼ばれます。

「マスク」という言葉を聞いたとき、何が思い浮かびますか？ あなたはおそらく、本質を曖昧にする何かを想像しているでしょう。 それは私たちが知る必要があるすべてです。

待ってください-しかし、記事はCSSアニメーションの作成と使用に関するものです...パニックはありません！ 大丈夫！

ベースマスクを作成する

background: green; divタグがあるとしbackground: green; そして、それは次のようなものです：



face.svgファイルもあります。



CSSプロパティmask-image: url (face.svg);を適用する場合mask-image: url (face.svg); divタグには、結果が表示されます。



これは奇妙だと思うかもしれません。 face.svg画像はdiv上部に配置されましたが、背景色を取りました。 これは私たちの期待に反しています。 これは、svgの不透明な部分を透明にするmask-typeプロパティが原因で発生します。 したがって、背景色が表示されます。

深く行かないようにしましょう。 background-colorを使用してマスクのbackground-colorを変更できることに注意してください。 background-colorさまざまな使用法に精通している場合は、グラデーションを適用し、中心を赤で塗りつぶし、エッジの周りを放射状に広げるシンプルなグラデーションを書くこともできます。 コードは次のようになります。

 background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1)); 

結果は次のようになります。

アニメーションを追加する

次に、この空の顔にアニメーションを追加します。 これを行うには、次の画像に示すexpression.svg使用します。 簡単にするために、同じ幅と高さのすべてのsvgファイルを作成したため、面とエクスプレッションを手動で揃える必要はありません。



mask-imageは、複数の画像をマスクとして使用できるクールなオプションがあります。 したがって、これを行うことができますmask-image: url (face.svg), url (expression.svg); 。 起こったことは次のとおりです。



CSSマスクの最も重要なプロパティの1つはmask-position 。これにより、マスクは親要素に対して左上隅に配置されます。 そして、 mask-imageようにmask-image mask-positionプロパティを使用して複数のマスクを配置できmask-image 。 顔をmask-position: 0 0, 0 12px;次のようなものを使用しますmask-position: 0 0, 0 12px; 。 これが何が起こったのかです。



face.svgの最初の位置は0 0で、2番目の0 12pxはexpression.svgです。 これにより12pxの転送が行われ、顔に必要な表現が与えられました。

機能を適用する

次に、ホバーでこれらのエクスプレッションをアニメートしましょう。 ホバー擬似クラスを適用した後に取得する完全なコードは次のようになります。

 i { background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1)); mask-image: url('face.svg'), url('expression.svg'); mask-position: 0 0, 0 12px; /* To make the sad expression */ transition: mask-position .5s ease-out; } i:hover { background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1)); mask-position: 0 0, 0 0; /* To make the happy expression */ transition: mask-position .1s linear; } 

CSSプロパティでもう少し遊んだ後、これを行うことができます。



これは、私たちがほぼ毎日遭遇する非常に刺激的なアニメーションを作成するために使用できる方法の1つです。

重要なポイント

マスキングは、すべてのブラウザで機能するとは限りません。 すべてのブラウザで動作さ-webkit- 、 -moz- -、- -moz- -、- -0-などの特別なブラウザタグを追加するだけ-0- 。

完全なコードはgithubとcodepenで見ることができます。 よろしくお願いします！ お役に立てば幸いです。

仮想サーバーを見つけるためのサイトであるVPS.todayを見てください 。 130のホストから1500の関税、便利なインターフェース、最適な仮想サーバーを見つけるための多数の基準。