HTML implémente un joli exemple graphique et textuel Dabai-tutoriel HTML-php.cn

Tout le monde a un Dabai chaleureux dans le cœur, avec de grands yeux brillants~ventre doux~épaules généreuses~bon cœur~Si je pouvais, je serais prêt à m'enfoncer dans le ventre de Dabai et à ne jamais en sortir, haha~Mao La balle est sur le point de tomber en disgrâce~

Hahaha

Tout le monde est un individu indépendant, Baymax ne fait pas exception, surveillez attentivement Baymax Là est une tête ronde avec une paire d'yeux noirs, un torse sans muscles abdominaux et un cœur nu, une paire de bras larges des deux côtés du ventre rond, et si vous regardez attentivement, il y a deux jolis petits doigts. Seules les cuisses épaisses ressemblant à des éléphants peuvent supporter ce ventre mou, haha~

Définir l'arrière-plan

Parce que Dabai est blanc, nous pouvons donc définir une couleur foncée fond pour mettre en valeur Dabai, afin que nous puissions le voir d'un coup d'œil sur le grand écran~
```
/*使用了一个渐变色，没有做各个浏览器的兼容性处理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
```
Copier après la connexion

Définir un conteneur pour Dabai

Définissez un conteneur div pour contrôler la position globale de Baymax sur l'écran

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

Copier après la connexion

Dessinez la tête de Baymax

La tête de Dabai est un ovale. La première chose qui me vient à l'esprit est de dessiner un rectangle sans la méthode de canevas intégrée, puis d'utiliser un rectangle arrondi (bordure-rayon, réglé sur 50 %).
Il y a une ombre grise sur le menton de la tête. On ajoute juste une bordure inférieure grise sous le rectangle.

Les yeux sont également ronds. Vous pouvez utiliser la même méthode pour positionner les yeux et la bouche (est-ce une bouche ?) par rapport aux positions correspondantes sur la tête.

<!-- 定义头部，包括两个眼睛、嘴 -->
      <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;
}

Copier après la connexion

Effet tête de Dabai.png

Dessine le torse de Dabai et le petit coeur au milieu

Le torse entre le cou et le ventre de Dabai est plus grand que la tête et plus petit que le ventre. On peut l'imaginer comme un ovale vertical épissé avec d'autres parties (il faut être imaginatif, c'est. pas comme la peinture nécessite définitivement l'épissage de diverses formes).

Le cœur est un cercle et l'effet croissant à l'intérieur peut être créé à l'aide d'ombres internes.

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

Copier après la connexion

Effet torse de Dabai.png

Dessinez le ventre et l'abdomen de Dabai, y compris la couverture (et le torse) Connexion)

Ventre de Dabai Le ventre est une ellipse plus grande que le torse puis déplacée vers le milieu du torse.

Mais il y aura un effet de bordure sur la partie de connexion. Nous pouvons utiliser une ellipse blanche pour recouvrir la bordure de la partie de connexion.

<!-- 定义肚子腹部，包括 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%;
}

Copier après la connexion

Effet ventre de Dabai.png

Dessinez les bras gauche et droit de Dabai, dont un grand et un petit Les deux doigts

La partie bras est constituée d'une ellipse inclinée, puis cachée dans la position correspondante derrière le torse.

Les deux petits doigts sont également une combinaison de deux petits ovales inclinés, et peuvent être positionnés à la position correspondante du bras.

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

Copier après la connexion

Effet bras de Dabai.png

Dessinez les jambes gauche et droite de Dabai

La méthode de dessin des jambes consiste à dessiner différents degrés de coins arrondis sur les quatre côtés du rectangle en utilisant la méthode du rayon de bordure pour former la forme des jambes, puis à positionner les jambes par rapport à la position correspondante. du corps.

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

Copier après la connexion

Effet grosse jambe blanche.png

Écrit à la fin du puzzle

Après avoir lu l'intégralité du tutoriel, pensez-vous qu'il n'y a que quelques points de connaissances pour dresser un tableau clair : border-radius, position: relative, z-index, transform: rotate(*deg ), bordure, ombre de boîte, le reste doit s'appuyer sur divers positionnements et index z pour épisser et empiler. Tant que vous déterminez quels éléments de base sont nécessaires, vous pouvez facilement les assembler en un joli Dabai ~ Je vais le mettre. toutes les parties ci-dessous Listez le tout, la façon dont vous l'assemblez dépend de votre imagination ~ Haha

Décomposition Dabai et rendu final.png

Code complet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!