CSSで大白を描く(●ー●)

今回はCSSを使って、超エネルギー陸戦隊の中の白い顔写真を描きます.
私たちのやり方は一つの要素にCSSを用いて背景図の位置を動的に変え,いくつかの線形効果を加えたものである.
See the Pen Baymax face-Hero Number 6 by Dnovan Hutchison(@donovanh)on CodePen.
単一要素
疑似クラスを使うことで、一つの元素を通して顔の部分を描くことができます.

<div class="baymax">div>

スタイルレンダリング
効果をよりクールにするために、私達はbodyにradial-gradientを使用して、微妙な色勾配変化を追加しました.

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

次に顔の位置を決めます.口は黒い線だけです.borderを使って実現します.

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

最初の属性は幅1.5emの辺を描きました.absoluteを使用して位置を特定し、容器(body)の中点に位置を定め、ここの50%は容器の大きさに関連している.
問題は今の元素は容器の中点から始まりますが、中間位置からではありません.
相殺するために、私達はtransformを使って元素を幅の50%、高さの40%によってそれぞれ左に移動します.
そして口の位置はこうです.
目を追加
私たちはbefore、afterの疑似クラスを使って目を実現します.これは余分なHTMLを必要とせず、CSSを完全に使えばいいです.

.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%のborder-radiusがあり、口の端に位置しています.最後にskewを使って変換して、目を中間に近づけて、結果はこうなります.
低電力量
映画の中の面白いシーンです.電気がなくなって、上下まぶたが喧嘩しています.色勾配背景と動画を使って実現できます.
まず背景の二つの色をあげます.黒は目を開けた状態を見せます.白は目を細めます.白い部分は最初は目の外に位置して、動画を使って目の顔を下垂させます.

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200%;
  ...
}

線形勾配の背景を加えて,その高さを容器の二倍にし,上部を容器の外に位置決めした.
背景があったら、私たちはkeyframesアニメーションを通して動作全体を制御できます.

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}

keyframesアニメーションは、いくつかの列フレームをパーセンテージで定義しています.パーセンテージはアニメーション実行時間に関係していますので、50%はアニメーションの半分の時間を表しています.
ここでは50%から85%の時間でまばたき動画を作ります.
次は偽類にこのアニメを実行するように教えます.animation属性を追加します.

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}

上のコードは実行時間を6秒として設定し、常にループします.
また、効果をよりリアルにするために、私たちはafterの疑似類を0.1 sの遅延を加えました.だから、第二の目は少し遅くなり、もっと萌えたように見えます.
ブラウザ対応
この例では、ブラウザの互換性のあるものは省略しました.-webkit、-mozなどです.動画はブラウザの互換性を考慮する必要があります.ここではAutoprefixerのようなツールを使うことをオススメします.
共有gifバージョン
ここにgifバージョンがあります.インターネットで自由に共有できます.
この文章は@cssanimationによって翻訳されていますが、全体の訳文には私なりの理解と意味があります.この訳文を転載するなら、英語の出所を明記してください.https://cssanimation.rocks/baymax/
訳文の出所:http://helkyle.com/2015/05/30/Baymax/