HTML은 귀여운 Dabai 그래픽 및 텍스트 예제를 구현합니다.-HTML 튜토리얼-php.cn

다들 마음속에는 따뜻한 다바이가 있고, 크고 반짝이는 눈~부드러운 배~넓은 어깨~다정한 마음~만약 가능하다면 다바이의 뱃속으로 들어가 절대 나오지 않을 텐데, 하하~마오추는 사랑에서 빠지기를 원해요~

하하하

모두가 독립적인 개인이고, 베이맥스도 예외는 아닙니다. 자세히 보면 베이맥스는 검은 눈과 동그란 머리, 복근이 없는 몸통, 그리고 맨 심장을 가지고 있습니다. 둥근 배 양쪽에 넓은 팔이 있고, 자세히 보면 귀여운 작은 손가락이 두 개 있어요. 마지막으로 두툼한 코끼리 같은 허벅지가 이 부드러운 배를 지탱해 주네요 ㅎㅎ~

배경을 정해주세요.

다바이는 흰색이니까 어두운 배경을 정의해서 다바이를 강조하면 넓은 화면에서 한 눈에 볼 수 있으니까 오예~
```
/*使用了一个渐变色，没有做各个浏览器的兼容性处理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
```
로그인 후 복사

다바이를 그릴 용기를 정의

화면에서 Dabai의 전체 위치를 제어하는 div 컨테이너를 정의합니다

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

로그인 후 복사

Dabai의 머리 그리기

Dabai의 머리는 타원형이므로 캔버스로 가져올 필요가 없습니다. 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;
}

로그인 후 복사

다바이의 머리 효과.png

다바이의 몸통과 가운데 작은 하트를 그려주세요

다바이의 몸통은 목에서 배까지가 머리보다 크고 배보다 작습니다. 수직의 타원형 모양이 다른 부분과 이어져 있다(다양한 그래픽을 붙여야 하는 페인팅과 달리 상상력이 풍부해야 한다).

하트는 원형이며 내부의 초승달 효과는 내부 그림자를 이용하여 만들 수 있습니다.

<!-- 定义躯干，包括心脏 -->
      <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

다바이의 왼팔과 오른팔을 그려주세요(큰 손가락 하나, 작은 손가락 두 개 포함)

팔 부분은 기울어진 타원으로 제작되어 숨겨져 있습니다 몸통 뒤쪽의 해당 위치로 충분합니다.

두 개의 작은 손가락도 두 개의 기울어진 작은 타원형의 조합으로 팔의 해당 위치에 위치할 수 있습니다.

<!-- 定义左臂，包括一大一小两个手指 -->      <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

다바이의 왼쪽 다리와 오른쪽 다리를 그려주세요

다리를 그리는 방법은 테두리 반경법을 이용하여 직사각형의 네 변에 서로 다른 각도를 그리는 것입니다 모서리를 필렛하여 다리 모양을 만든 다음 몸체를 기준으로 다리의 위치를 지정하면 됩니다.

<!-- 定义左腿 -->
      <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);
}

로그인 후 복사

다바이의 다리 효과.png

최종 직소 퍼즐에 쓰여진 내용

전체 튜토리얼을 다 읽고 나면 다바이를 그리는 데 실제로 몇 가지 지식 포인트만 필요하다고 생각하시나요? 테두리-반경 , 위치: 상대, z-인덱스, 변환: 회전(*deg), 테두리, 상자 그림자, 나머지는 기본이 무엇인지 파악하는 한 위치 및 z-인덱스의 다양한 위치 지정, 접합 및 스태킹에 의존합니다. 귀여운 베이맥스에 쉽게 끼울 수 있어요~ 아래에 모든 부품을 나열해 놓을 테니, 결합하는 방법은 상상에 따라 달라요~ 하하

베이맥스 분해 및 최종 렌더링입니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!