HTML은 귀여운 Dabai 그래픽 및 텍스트 예제를 구현합니다.

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

하하하

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

배경을 정해주세요.

• 다바이는 흰색이니까 어두운 배경을 정의해서 다바이를 강조하면 넓은 화면에서 한 눈에 볼 수 있으니까 오예~

  /*使用了一个渐变色，没有做各个浏览器的兼容性处理*/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 중국어 웹사이트의 기타 관련 기사를 참조하세요!