今日、アニメーションは注目を集めるためだけでなく、ユーザーの操作を改善し、ナビゲーションを容易にするためにも使用されています。 優れたデザインでは、アニメーションが全体的なコンセプトと組み合わされるように追加され、それにより便利なユーザーインターフェイスが作成されます。
この記事では、さまざまな表現で顔の簡単なアニメーションを作成し、その過程で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の関税、便利なインターフェース、最適な仮想サーバーを見つけるための多数の基準。
