CSS3_html/css_WEB-ITnose を使用してジングル猫を描く方法

この事例を勉強して、もっと楽しいと思ったので、実践してみました。その後、PS や Flash をよく使用する人なら、ジングル キャットを描くのは非常に簡単であることを知っているはずです。少なくとも私はそう思います。しかし、実際に CSS3 で描画するのは初めてなので、私のような初心者にとっては、少なくとも簡単なキャラクターの描画方法といくつかのアニメーション効果を知ることができてとても役に立ちます。生きてたらもっと楽しいよ！ OK、始める前に、レンダリングをお見せしましょう:

PS: 正直に言うと、私は子供の頃によくドラえもんを見ていましたが、突然とてもフレンドリーで子供っぽいと感じました。すぐにかなり若く見えました（笑）！温かい笑顔

まず、HTML 構造を設定します。

<div class="wrapper">  <!--叮当猫整体-->  <div class="doraemon">  <!--头部-->  <div class="head">  <!--眼睛-->  <div class="eyes">  <div class="eye left">   <!--眼珠-->   <div class="black bleft"></div>  </div>  <div class="eye right">   <div class="black bright"></div>  </div>  </div>  <!--脸部-->  <div class="face">  <!--白色脸底-->  <div class="white"></div>  <!--鼻子-->  <div class="nose">   <!--鼻子高光部分-->   <div class="light"></div>  </div>  <!--鼻子的竖线-->  <div class="nose_line"></div>  <!--嘴巴-->  <div class="mouth"></div>  <!--胡须-->  <div class="whiskers">   <div class="whisker rTop r160"></div>   <div class="whisker rMiddle"></div>   <div class="whisker rBottom r20"></div>   <div class="whisker lTop r20"></div>   <div class="whisker lMiddle"></div>   <div class="whisker lBottom r160"></div>  </div>  </div>  </div>  <!--脖子和铃铛-->  <div class="choker">  <!--铃铛-->  <div class="bell">  <div class="bell_line"></div>  <div class="bell_circle"></div>  <div class="bell_under"></div>  <div class="bell_light"></div>  </div>  </div>  <!--身体-->  <div class="bodys">  <!--肚子-->  <div class="body"></div>  <!--肚兜-->  <div class="wraps"></div>  <!--口袋-->  <div class="pocket"></div>  <!--遮住一半口袋，使其呈现半圆-->  <div class="pocket_mask"></div>  </div>  <!--右手-->  <div class="hand_right">  <!--手臂-->  <div class="arm"></div>  <!--手掌-->  <div class="circle"></div>  <!--遮住手臂和身子交接处的线-->  <div class="arm_rewrite"></div>  </div>  <!--左手-->  <div class="hand_left">  <div class="arm"></div>  <div class="circle"></div>  <div class="arm_rewrite"></div>  </div>  <!--脚-->  <div class="foot">  <div class="left"></div>  <div class="right"></div>  <!--双脚之间的缝隙-->  <div class="foot_rewrite"></div>  </div>  </div> </div>

これは、将来自分で他のキャラクターを描きたい場合に非常に役立ちます。思考がより明確になります。

次に、頭、首、胴体、足をベースにデモンストレーションしていきます。まず、コンテナのラッパーとドラえもん全体の基本的なスタイルをいくつか作成します。 ドラえもんは、主に子要素/子孫要素の配置を容易にするために、位置を相対に設定します。

.wrapper{  margin: 50px 0 0 500px; } .doraemon{  position: relative; }

頭のスタイル、Jingle Cat の頭は完全な円ではないため、幅と高さに少しずれがあります。その後、border-radius を使用して頭を長方形から長方形に変更します。楕円形にしてから放射状のグラデーションを使用します。背景に右上隅から放射状のグラデーションを与え、影を追加してより立体的にします。背景: #07bbee; は、以前のバージョンのブラウザーとの互換性のためです。