HTML はかわいい Dabai グラフィックとテキストの例を実装します-htmlチュートリアル-php.cn

誰もが心の中に温かいダバイを持っています、大きなキラキラした目〜柔らかいお腹〜寛大な肩〜優しい心〜できることなら、私はダバイのお腹に沈んで決して出てこないつもりです、ハハ〜マオチウは支持されなくなりたい〜

ははは

誰もが独立した個人であり、ベイマックスも例外ではありません。よく見ると、ベイマックスは黒い目を持つ丸い頭、腹筋のない胴体、そして裸の心を持っています。丸いお腹の両側には幅広の腕があり、よく見るとかわいい小指が 2 本あります。最後に、象のような太い太ももがこの柔らかいお腹を支えています (笑)

背景を定義します。

ダバイは白いので、広大な画面で一目でわかるように、ダバイを強調表示する暗い背景を定義できます、おーい~
```
/*使用了一个渐变色，没有做各个浏览器的兼容性处理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
```
ログイン後にコピー

ダバイを描画するためのコンテナを定義します

画面上のダバイの全体的な位置を制御する div コンテナを定義します

<!--定义大白的存放容器--><div id="baymax"></div>
#baymax {
  margin: 0 auto;/*设置为 居中*/
  height: 600px; /*设置高度*/
  overflow: hidden; /*隐藏溢出*/
}

ログイン後にコピー

ダバイの頭を描画します

ダバイの頭は楕円形なので、キャンバスに持ち込む必要はありません。 ellipse は、最初に長方形を描画してから、border-radius メソッド (border-radius、円形の効果を持たせるには 50% に設定) を使用します。
頭のあごに灰色の影のレイヤーがあります。長方形の下に灰色の下の境界線を追加するだけです。

同じ方法を使用して、頭の対応する位置に対して目と口（口ですか？）を配置できます。

<!-- 定义头部，包括两个眼睛、嘴 -->
      <div id="head">
          <div id="eye">
          </div>
          <div id="eye2">
          </div>
          <div id="mouth">
          </div>
      </div>#head { height: 64px;width: 100px;  border-radius: 50%; /*以百分比定义圆角的形状*/  background: #fff; /*定义背景颜色*/  margin: 0 auto;/*头部居中*/  margin-bottom: -20px;/*这个是为了使头部与身体融为一体*/  border-bottom: 5px solid #e0e0e0; /*设置下边框的样式，制作阴影的效果*/  z-index: 100;  /*属性设置元素的堆叠顺序；拥有更高堆叠顺序的元素总是会
                           处于堆叠顺序较低的元素的前面*/  position: relative; /*生成相对定位的元素，方便眼睛和嘴巴的定位*/
}#eye,#eye2 {width: 11px;height: 13px;background: #282828;border-radius: 50%;  position: relative; /*生成相对定位的元素，相对于上层头部容器的位置*/  top: 30px;left: 27px;  transform: rotate(8deg);/*旋转该元素，让眼睛有一定的角度*/
}#eye2 {  transform: rotate(-8deg); /*使左右两只眼睛旋转对称*/  left: 69px; /*设置第二只眼睛相对于头部的位置*/  top: 17px;
}#mouth {width: 38px;height: 1.5px;background: #282828;  position: relative;/*生成相对定位的元素，相对于上层头部容器的位置*/  left: 34px;top: 10px;
}

ログイン後にコピー

Dabaiの頭のエフェクト.png

Dabaiの胴体と真ん中に小さなハートを描きます

Dabaiの首から腹までの胴体は、頭より大きく、腹より小さいです。垂直の楕円形が他のパーツと接続されているものとして想像できます（さまざまなグラフィックスと接続する必要がある絵画とは異なり、想像力が必要です）。

ハートは円で、内部の影を使用して内部の三日月効果を作成できます。

<!-- 定义躯干，包括心脏 -->
      <div id="torso">
          <div id="heart">
          </div>
      </div>#torso {margin: 0 auto;height: 200px; width: 180px;background: #fff;  border-radius: 47%;/*设置圆角*/  border: 5px solid #e0e0e0;/*设置边框*/  border-top: none;/*因为顶部要跟头部做衔接，所以顶部不设置边框*/  z-index: 1;/*保证躯干堆叠在头部的里面*/
}
#heart{width:25px;height:25px;border-radius:50%;box-shadow:2px 5px 2px #ccc inset;/*向边框四周添加阴影效果*/position:relative;/*设置心脏相对于躯干的位置*/  
right:-115px;top:40px;z-index:111;/*保证心脏堆叠在躯干的外面*/border:1px solid #ccc;
}

ログイン後にコピー

ダバイの胴体エフェクト.png

ダバイのお腹と腹部をカバー(胴体との接続部分)も含めて描きます

ダバイの腹部と腹部を胴体より大きい楕円にして動かしますそれは胴体の真ん中です。

ただし、接続部分は境界線の影響を受けます。接続部分の境界線を隠すために白い楕円を使用できます。

<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
      <div id="belly">
          <div id="cover">
          </div>
      </div>#belly {  margin: 0 auto;height: 300px;width: 245px;  margin-top: -140px;/*将腹部往上移动，差不多移到躯干的中间位置*/  background: #fff;border-radius: 47%;  border: 5px solid #e0e0e0; /*设置边框*/  border-top: none;  z-index: 5;/*保证腹部堆叠在躯干的外面*/
}#cover {  width: 190px;background: #fff;height: 150px;margin: 0 auto;  position: relative;/*将cover部分相对定位到要遮挡的位置*/  top: -20px;border-radius: 50%;
}

ログイン後にコピー

ダバイの腹エフェクト.png

ダバイの左右の腕を大指と小指の2本を含めて描きます

腕の部分は傾いた楕円で作って隠しています。胴体背中の対応する位置で十分です。

2本の小指も、2つの傾斜した小さな楕円形を組み合わせたもので、腕の対応する位置に配置できます。

<!-- 定义左臂，包括一大一小两个手指 -->      <div id="left-arm">          <div id="l-bigfinger">          </div>          <div id="l-smallfinger">          </div>      </div>      <!-- 定义右臂，同样包括一大一小两个手指 -->      <div id="right-arm">          <div id="r-bigfinger">          </div>          <div id="r-smallfinger">          </div>      </div>#left-arm,#right-arm {  height: 270px;width: 120px;border-radius: 50%;background: #fff;  margin: 0 auto;  position: relative; /*将手臂相对定位到相应的位置*/  top: -350px;left: -100px;  transform: rotate(20deg); /*将手臂（椭圆）顺时针旋转20度，更加贴合躯干*/
  z-index: -1;/*保证手臂堆叠在躯干的里面*/
}#right-arm {  transform: rotate(-20deg);/*右手臂（椭圆）相应的逆时针旋转20度，与左手臂对称*/  left: 100px;top: -620px;
}#l-bigfinger,#r-bigfinger {  height: 50px;width: 20px;border-radius: 50%;background: #fff;  position: relative;/*将大手指相对定位到相应的位置，并相应的旋转*/  top: 250px;left: 50px;transform: rotate(-50deg);
}#r-bigfinger {  left: 50px;transform: rotate(50deg);
}#l-smallfinger,#r-smallfinger {  height: 35px;width: 15px;border-radius: 50%;background: #fff;  position: relative;;/*将小手指相对定位到相应的位置，并相应的旋转*/  top: 195px; left: 66px;transform: rotate(-40deg);
}#r-smallfinger {  transform: rotate(40deg);left: 37px;
}

ログイン後にコピー

ダバイの腕のエフェクト.png

ダバイの左右の脚を描画します

脚の描画方法は、ボーダー半径法を使用して長方形の4つの辺に異なる角度を描画します。角をフィレットして脚の形状を形成し、本体に対して脚を配置するだけです。

<!-- 定义左腿 -->
      <div id="left-leg">
      </div>
      <!-- 定义右腿 -->
      <div id="right-leg">
      </div>#left-leg,#right-leg {  height: 170px;width: 90px;  border-radius: 40% 30% 10px 45%;/*矩形的左上、右上、左下、右下各个角度画不同程度的圆角*/  background: #fff;  position: relative;/*相对定位到对应的位置*/  top: -640px;left: -45px;  transform: rotate(-1deg);  z-index: -2;/*保证腿部堆叠在最下面*/  margin: 0 auto;
}#right-leg {  border-radius:30% 40% 45% 10px;  top: -810px;left: 50px;  transform: rotate(1deg);
}

ログイン後にコピー

Dabai の脚の効果.png

最後のジグソーパズルに書かれています

チュートリアル全体を読んだ後、Dabai を描くのに実際に必要なのはいくつかの知識ポイントだけであると思いますか: border-radius 、位置：相対、z-index、変換：rotate(*deg)、border、box-shadow、残りは、基本的なものを理解している限り、さまざまな位置決め、スプライシング、および位置とz-indexのスタックに依存します。要素が必要なので、簡単に接続してかわいいベイマックスを作ることができます~以下にすべてのパーツをリストします。それらを結合する方法はあなたの想像力次第です~笑

ベイマックスの分解と最終レンダリング。 png

完全なコード

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><title>html+css实现大白的画法</title><meta content="" name="description"><meta content="" name="keywords">  <style type="text/css">  /*定义整体的背景色*/      body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}   
      #baymax {/*设置为 居中*/margin: 0 auto;/*高度*/height: 600px;/*隐藏溢出*/overflow: hidden;
}#head {height: 64px;width: 100px;/*以百分比定义圆角的形状*/border-radius: 50%;/*背景*/background: #fff;margin: 0 auto;margin-bottom: -20px;/*设置下边框的样式*/border-bottom: 5px solid #e0e0e0;/*属性设置元素的堆叠顺序；
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/z-index: 100;/*生成相对定位的元素*/position: relative;
}#eye,#eye2 {width: 11px;height: 13px;background: #282828;border-radius: 50%;position: relative;top: 30px;left: 27px;/*旋转该元素*/transform: rotate(8deg);
}#eye2 {/*使其旋转对称*/transform: rotate(-8deg);left: 69px;top: 17px;

}#mouth {width: 38px;height: 1.5px;background: #282828;position: relative;left: 34px;top: 10px;
}#torso,#belly {margin: 0 auto;height: 200px;width: 180px;background: #fff;border-radius: 47%;/*设置边框*/border: 5px solid #e0e0e0;border-top: none;z-index: 1;
}#belly {height: 300px;width: 245px;margin-top: -140px;z-index: 5;
}#cover {width: 190px;background: #fff;height: 150px;margin: 0 auto;position: relative;top: -20px;border-radius: 50%;
}#heart{  width:25px;  height:25px;  border-radius:50%;  position:relative;  /*向边框四周添加阴影效果*/  box-shadow:2px 5px 2px #ccc inset;  right:-115px;  top:40px;  z-index:111;  border:1px solid #ccc;
}#left-arm,#right-arm {height: 270px;width: 120px;border-radius: 50%;background: #fff;margin: 0 auto;position: relative;top: -350px;left: -100px;transform: rotate(20deg);z-index: -1;
}#right-arm {transform: rotate(-20deg);left: 100px;top: -620px;
}#l-bigfinger,#r-bigfinger {height: 50px;width: 20px;border-radius: 50%;background: #fff;position: relative;top: 250px;left: 50px;transform: rotate(-50deg);
}#r-bigfinger {left: 50px;transform: rotate(50deg);
}#l-smallfinger,#r-smallfinger {height: 35px;width: 15px;border-radius: 50%;background: #fff;position: relative;top: 195px;left: 66px;transform: rotate(-40deg);
}#r-smallfinger {background: #fff;transform: rotate(40deg);top: 195px;left: 37px;
}#left-leg,

ログイン後にコピー

以上がHTML はかわいい Dabai グラフィックとテキストの例を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。