CSSを使ってきれいな絵を描いてみましょう (●-●)_html/css

CSSを使ってきれいな絵を描いてみましょう (●-●)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:36

オリジナル

1144 人が閲覧しました

今回はCSSを使用してスーパーマリーンズのベイマックスのアバターを描画します。

私たちが行うことは、CSS を使用して要素上の背景画像の位置を動的に変更し、いくつかの線形効果を追加することです。

CodePen で Donovan Hutchinson (@donovanh) によるペンベイマックスの顔 - ヒーローナンバー 6 を参照してください。

単一要素

疑似クラスを使用することで、1 つの要素を通して顔の一部を描画することができます

スタイルレンダリング

効果をさらにクールにするために、ボディに放射状グラデーションを使用して微妙な色のグラデーションの変化を追加し、より頭らしくします。

rreee

次に、口は黒い線だけですが、それを実現するために境界線を使用します。

<div class="baymax"></div>

ログイン後にコピー

最初の属性は、幅 1.5em の辺を描画します。次に、絶対配置を使用して、コンテナー (本体) の中間点に位置を設定します。ここでの 50% は、コンテナーのサイズに関係します。

問題は、現在の要素がコンテナの中間点から始まりますが、中央から出ていないことです。

オフセットするには、transform を使用して要素を幅の 50% と高さの 40% に従って左と上にそれぞれ移動します。

口の位置はこんな感じです

目を追加します

目の実装には前後の疑似クラスを使用します。追加のHTMLは必要なく、完全にCSSを使用するだけで十分です。

body { background: radial-gradient(center, #fff, #fff 50%, #aaa); background-size: 100%; background-repeat: no-repeat; height: 100vh; }

ログイン後にコピー

各疑似クラスは黒の背景、50% の境界半径を持ち、口の端に配置されます。最後に斜め変換を使って目を少し真ん中に寄せるとこんな感じになります。

バッテリー残量低下

これは映画のとても興味深いシーンです (●?●) バッテリーが切れて、上まぶたと下まぶたが争っています。これは、色のグラデーションの背景とアニメーションを使用して行うことができます。

まず、背景に2色を与えます。黒は目を開けた状態を表し、白は目を細めていることを表します。最初に白い部分を目の外側に配置し、アニメーションを使用して目をたれさせます。

.baymax { border-bottom: 1.5em solid #000; position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -40%); }

ログイン後にコピー

線形グラデーションの背景を追加し、コンテナの高さの 2 倍にし、上半分をコンテナの外側に配置しました。

背景を使用すると、キーフレームアニメーションを通じてアクション全体を制御できます。

.baymax::before { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; left: -9em; top: -6em; transform: skewX(-4deg); }.baymax::after { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; right: -9em; top: -6em; transform: skewX(4deg); }

ログイン後にコピー

キーフレームアニメーションは、パーセンテージによって一連のフレームを定義します。パーセンテージはアニメーションの実行時間に関連するため、50% はアニメーション時間の半分を表します。

ここでは、50% ～ 85% の確率で点滅アニメーションを実行します。

次のステップは、疑似クラスにこのアニメーションを実行するように指示することです。アニメーション属性を追加します。

うわー

上記のコードは実行時間を 6 秒に設定し、永久にループします。

さらに、エフェクトをよりリアルにするために、疑似クラスの後に 0.1 秒の遅延を追加したため、2 番目の目は少し遅くなり、より可愛く見えるようです。

ブラウザの互換性

この例では、ブラウザの互換性に関する要素、-webkit、-moz などを省略しました。アニメーションではブラウザの互換性を考慮する必要があります。ここでは Autoprefixer などのツールを使用することをお勧めします。

GIFバージョンを共有してください

ここにGIFバージョンがあります。好きなようにオンラインで共有できます。

この記事は @cssanimation によって翻訳されました。翻訳には私自身の理解と意味が含まれています。うまく翻訳されていない点や間違っている点がありましたら、アドバイスをお願いします。この翻訳を転載したい場合は、英語の出典を明記してください: https://cssanimation.rocks/baymax/