CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。-CSSチュートリアル-php.cn

CSS を使用してライオンのアニメーションを描画するにはどうすればよいですか?次の記事では、CSS を使用してかわいいライオンのアニメーションを描く方法をステップバイステップで説明します。

CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

今回は、純粋な CSS を使用して、キュートでかわいい漫画のライオンを描きます。この栗を通じて、より多くの CSS 描画テクニックに慣れることができます。将来のインターフェースは描画タスクがより快適になると信じています。 [推奨学習: css ビデオチュートリアル ]

デモ

https://code.juejin.cn/pen/7088181155333144617

Text

基本的な図面

まず、カンカンのライオンの部分を見てみましょう:

CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

上記のビューを通して、このライオンは 耳、目、鼻、ひげ、口、たてがみ、前脚、爪、尾 これらのパーツで構成されています。長方形や角を丸くするだけで多くのパーツが完成することは、皆さんも理解するのは難しくないと思います。たとえば、目は 2 つの円を積み重ねることによって形成されます。詳細については、上記のコードのデモを参照してください。ここでは、これらの基本的なグラフィックについてはあまり詳しく説明しません。

次に、詳しく描くのが難しいグラフィックスについて説明します。

EAR

花びらのような半円状に見えることがわかります。従来の方法では決して簡単ではありませんが、次の方法で行うことができます。 clip-path 属性は、クリッピングを使用して要素の表示可能領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。耳を描画するには、この領域を使用してトリミングします。楕円トリミングの ellipse メソッドの場合、渡された 2 つの値はトリミングの半径を表し、at の後の 2 つの値はトリミングを表します。 x 軸と y 軸の座標。

.ear {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 10px;
    background-color: var(--skin-color);
    z-index: 9;
    border-radius: 40px;
    clip-path: ellipse(100% 100% at -20% -10%);
}

ログイン後にコピー

CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

同様に、半円に近いボディも clip-path:ellipse で実現します。もちろん、これ以上のカットも可能です。どのグラフィックも非常に迫力があると言えます。ノーズ # 0 に設定します。

border

属性を使用して完了し、border-width を設定してブロックの幅と高さを置き換えます。ただし、ブロックの内側は次のように構成されます。小さな三角形4つ長方形ですが、上・右・下・左の順に配置されているので、いずれかの角に色を割り当てることで三角形を実現できます。

.nose {
    width: 0px;
    height: 0px;
    border-width: 20px 30px;
    border-style: solid;
    border-color: var(--eye-color) transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 40px;
    z-index: 3;
}

ログイン後にコピー

テールテールは主に border

を使用して実装され、長方形の div ブロックを描画します。彼はそれを斜めに回転し、境界線の 1 つだけを描画し、

border-radius: 40% 50% CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。を使用して曲線の雰囲気を与えて完了しました。

.tail {
    width: 320px;
    height: 320px;
    position: absolute;
    top: -137px;
    border-style: solid;
    border-width: 30px;
    border-radius: 40% 50%;
    border-color: transparent var(--tail-color) transparent transparent;
    transform: rotate(125deg);
    left: -180px;
}

ログイン後にコピー

アニメーション制作

尻尾を振る CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

尻尾の力は尻尾の根元から発生するため、根元から少し揺れる回転アニメーションを行う必要があるため、原点を変更できる transform-origin 属性を使用します。ルートが力を及ぼす場合など、要素の変換を行うには、transform-origin: 50% 100% に直接設定するか、

transform-origin: centerbottom

と記述することもできます。。最初のパラメータは、ボックスモデルの左側からの変形中心を定義するオフセット値を表します。

#キーワード値

##左センター##100%#キーワード##トップ

0%
`##50%`	#right
	`2 番目のパラメータは定義を表します。ボックスモデルの上から見た変形中心。`
`値`

##0%

##50%#100%##

后面的动画微微的旋转偏移就看下方的代码块了，非常简单只需要微调一些角度和偏移即可。这里再多补充一句，transform 的变换必须是盒模型定位的元素哦。

.tail {
  // ...
  animation: 1s wagging ease-in-out infinite alternate forwards;
  transform-origin: 50% 100%;
}

@keyframes wagging {
  0% {
    transform: rotate(125deg) translateX(0) translateY(0px);
  }
  100% {
    transform: rotate(130deg) translateX(15px) translateY(-15px);
  }
}

ログイン後にコピー

CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

眨眼睛

眼睛一眨一眨会显得狮子会更生动，但是如果通过缩小高度做动画实现的画，会显得非常难看因为连眼白眼珠都会压缩变形。所以我们依然是通过 clip-path 属性，利用 ellipse 方法把裁剪范围从顶部和底部往中间延伸，直至2%留一道缝隙即可。

.eye {
  // ...
  animation: 4s blinking infinite forwards;
  overflow: hidden;
}
@keyframes blinking {
  0%,
  40%,
  80% {
    clip-path: ellipse(100% 100% at 50% 48%);
  }
  60%,
  100% {
    clip-path: ellipse(100% 2% at 50% 48%);
  }
}

ログイン後にコピー

CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。