Maison > Article > interface Web > Partagez un exemple de code HTML pour créer un Doraemon animé

Partagez un exemple de code HTML pour créer un Doraemon animé

黄舟original: 2017-07-18 14:33:129377parcourir

Je crois que tout le monde a un Doraemon dans son enfance, un petit ventre plein de Doraemon incroyable, un Doraemon qui reste avec toi quand tu es impuissant et triste, un Doraemon qui t'accompagne avec tes pensées aléatoires et mange du Dorayaki~ Aujourd'hui. nous dessinerons un Doraemon dans nos cœurs~

Définir le conteneur de Doraemon

Le même chose définit d'abord un grand conteneur pour Doraemon et détermine sa taille et sa position.
```

<p class="doa"></p>
/*哆啦A梦*/
 .doa{position: relative;top: 100px;}
```
Dessinez la tête de Doraemon (y compris le visage, le visage comprend les yeux et le nez)
La tête est bien incluse Plusieurs parties : Le visage et le nez de Doraemon. Le visage comprend également deux yeux. Il y a des globes oculaires et du blanc des yeux dans les deux yeux, il y aura donc plusieurs couches d'imbrication de dom. Bien sûr, les graphiques de base sont tous constitués de p + border-radius assemblés. .
Placez simplement les différentes parties des éléments dessinés dans les positions correspondantes.

Regardez les quelques images que j'ai dessinées auparavant et vous saurez que le rayon-bordure est un attribut très couramment utilisé. Presque toutes les déformations de p en sont indissociables. face de border-radius Cela devrait être border-radius : 300px 300px 300px 300px/300px 300px 300px 300px; pour Jiangzi, nous n'écrivons généralement pas le contenu après la barre oblique. hauteur verticale. Par défaut, elle n'est pas écrite après la barre avant. Les tailles horizontales et verticales sont les mêmes. Je sais que ce que j'ai dit n'est pas assez détaillé. Vous pouvez vous référer au blog de mon Xinshen When Will Autumn Moon Come ? Que savez-vous du rayon de bordure CSS3 ? , garantissant que vous comprendrez parfaitement le rayon frontalier sous la direction d'un chauffeur expérimenté en quelques minutes. Pourquoi ne montez-vous pas rapidement dans le bus ?

<!-- 头 -->    
  <p class="head">
 <!-- 存放脸部的容器 -->
 <p class="face">
 <!-- 左眼大圈儿 -->
 <p>
 <!-- 左眼眼珠（黑色部分） -->
 <p>
 <!-- 左眼眼白，黑色里面的白色部分 -->
 <p></p>
 </p>
 </p>
 <!-- 右眼大圈儿 -->
 <p>
 <!--右眼眼珠（黑色部分） -->
 <p>
 <!-- 右眼眼白，黑色里面的白色部分 -->
 <p></p>
 </p>
 </p>
 </p>
 <!-- 红鼻子部分 -->
 <p class="nose">
 <!-- 红鼻子里面的白圈儿 -->
 <p></p>
 </p>
 <!-- 红鼻子下面的那根黑线，也属于鼻子部分 -->
 <p class="nose1"></p>
 </p>
.head{
 margin: 0 auto; /*头部定义大小并居中显示*/
 width: 400px;
 height: 350px;
 background: #008ee3; /*头部定义背景颜色*/
 position: relative;
 border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%; /*头部定义四个方向圆角大小*/
 }
 .face{
 width: 310px; /*脸部定义大小*/
 height: 260px;
 background: snow; /*脸部定义背景颜色*/
 border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%; /*脸部定义四个方向的圆角大小*/
 position: relative; /*脸部定义位置，是相对于head的位置*/
 top: 90px;
 left: 45px;
 }
 /*左眼眶*/
 .face>p:first-child{
 width: 80px; /*左眼框定义大小*/
 height: 100px;
 border-radius: 50%; /*左眼框定义与圆角大小*/
 border:2px #000 solid; /*定义外边框*/
 background: snow;
 float: left; /*为了使左右两个眼睛能在一排显示*/
 position: relative; /*位置是相对于face的位置*/
 top:-40px;
 left: 71px;
 z-index: 50;
 }
 /*右眼眶，画法跟左眼一样*/
 .face>p:last-child{
 width: 80px;
 height: 100px;
 border-radius: 50%;
 border:2px #000 solid;
 background: snow;
 float: left;
 position: relative;
 top:-40px;
 left: 71px;
 z-index: 50;
 }
 /*左眼珠1*/
 .face>p:first-child p{
 width: 20px; /*定义眼珠的大小*/
 height: 25px;
 background: #000;
 border-radius: 50%;
 position: absolute; /*定义眼珠的位置，相对于眼眶的位置*/
 top: 45px;
 left: 60px;
 }
 /*左瞳孔*/
 .face>p:first-child p p{
 width: 10px; /*定义黑色瞳孔的大小*/
 height: 10px;
 background: #ffffff;
 border-radius: 50%;
 position: absolute; /*定义黑色瞳孔的位置，相对于眼珠的位置*/
 top: 7px;
 left: 10px;
 }
 /*右眼珠和左眼珠画法一样*/
 .face>p:last-child p{
 width: 20px;
 height: 25px;
 background: #000;
 border-radius: 50%;
 position: absolute;
 top: 45px;
 }
 /*右瞳孔和左瞳孔的画法一样*/
 .face>p:last-child p p{
 width: 10px;
 height: 10px;
 background: #ffffff;
 border-radius: 50%;
 position: absolute;
 top: 7px;
 }
 .nose{
 width: 30px; /*定义红鼻子的大小*/
 height: 30px;
 border-radius: 50%;
 background: #c70000;
 position: absolute;
 top: 130px;
 left: 50%;
 margin-left: -15px;
 z-index: 10;
 }
 .nose p{
 width: 10px; /*定义红鼻子里面白色圈圈的大小*/
 height: 10px;
 border-radius: 50%;
 position: absolute;
 background: #ffffff;
 top: 10px;
 margin-left: 20px;
 z-index: 10;
 }
 .nose1{
 width: 2px; /*定义红鼻子下面的那一条黑线*/
 height: 130px;
 background: #000;
 position: absolute;
 top: 160px;
 left: 50%;
 margin-left: -1px;
 z-index: 10;
 }

Tête de Doraemon.png
Dessin Doraemon La partie buccale de Laa Meng

La bouche doit être très simple En un coup d'œil, vous pouvez dire qu'elle est réalisée avec bordure + bordure-radius.

<p class="mouth"></p>
.mouth{
 width: 250px; /*定义嘴巴的大小*/
 height: 200px;
 border-radius: 50%;
 background: snow;
 border-bottom: 2px #000 solid;
 margin: -230px auto;
 position: relative; /*定义嘴巴的位置*/
 }

Partagez un exemple de code HTML pour créer un Doraemon animé

La bouche de Doraemon.png

Dessin Doraemon La partie barbe d'un dream

La partie barbe a en fait été introduite dans l'article précédent lors du dessin du HTML pour créer une animation [Série 3] - Kitten Smiley Animation lors du dessin de la barbe La méthode ne sera pas décrite en détail ici, l'idée de base est la même.

<!-- 胡须 -->
  <p class="beard">
 <!-- 左边胡须部分 -->
 <p class="left">
 <!-- 第一根胡须 -->
 <p></p>
 <!-- 第二根胡须 -->
 <p></p>
 <!-- 第三根胡须 -->
 <p></p>
 </p>
 <p class="right">
 <p></p>
 <p></p>
 <p></p>
 </p>
 <!-- 脖子部分的小白条部分 -->
 <span></span>
 </p>
/*胡须样式*/
.beard .left p:first-child{
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 10% 90% 10% 90% / 10% 90% 10% 90%;
 position: absolute;
 left: 50%;
 top: 140px;
 margin-left: -170px;
 z-index: 100;
 }
 .beard .left p:nth-child(2){
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 10% 90% 10% 90% / 30% 70% 40% 60%;
 position: absolute;
 left: 50%;
 top: 170px;
 margin-left: -170px;
 z-index: 100;
 }
 .beard .left p:last-child{
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 10% 90% 10% 90% / 40% 60% 10% 90%;
 position: absolute;
 left: 50%;
 top: 200px;
 margin-left: -170px;
 z-index: 100;
 }

 .beard .right p:first-child{
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 90% 10% 90% 10% / 90% 10% 90% 10%;
 position: absolute;
 left: 50%;
 top: 140px;
 margin-left: 50px;
 z-index: 100;
 }
 .beard .right p:nth-child(2){
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 90% 10% 90% 10% / 70% 30% 60% 40%;
 position: absolute;
 left: 50%;
 top: 170px;
 margin-left: 50px;
 z-index: 100;
 }
 .beard .right p:last-child{
 width: 120px;
 height: 40px;
 border-top: 2px #000 solid;
 border-radius: 90% 10% 90% 10% / 60% 40% 90% 10%;
 position: absolute;
 left: 50%;
 top: 200px;
 margin-left: 50px;
 z-index: 100;
 }
 .beard span{
 display: block;
 width: 60px;
 height: 3.5px;
 background: #ffffff;
 border-radius: 4px;
 position: absolute;
 top: 352px;
 left: 50%;
 margin-left: -105px;
 }

Partagez un exemple de code HTML pour créer un Doraemon animé

Barbe de Doraemon.png

Dessin Doraemon La partie du cou d'un rêve (la partie du cou comprend la cloche)
Le cou a la forme après la déformation de base p, et la partie excédentaire peut être cachée sous la tête.

La partie cloche est composée de graphiques de base très simples.

<!-- 脖 -->
  <p class="neck">
 <!-- 铃铛的圆形 -->
 <p></p>
 <!-- 铃铛的小圆角矩形 -->
 <p></p>
 <!-- 铃铛的小圆形 -->
 <p></p>
 <!-- 铃铛的小竖线 -->
 <p></p>
 </p>
.neck{
 width: 330px;
 height: 200px;
 border-radius: 50% 50% 20% 20% / 50% 50% 50% 50%;
 background: #e30000;
 margin: 80px auto;
 z-index: 100;
 }
 .neck p:first-child{
 border: 2px #000 solid;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 background: #ffdd2e;
 position: absolute;
 top: 350px;
 left: 50%;
 margin-left: -22px;
 transition: all 1s;
 }
 .neck p:nth-child(2){
 border: 2px #000 solid;
 width: 44px;
 height: 5px;
 background: #ffdd2e;
 position: absolute;
 left: 50%;
 margin-left: -24px;
 top: 363px;
 border-radius: 5px;
 transition: all 1s;
 }
 .neck p:nth-child(3){
 width: 8px;
 height: 8px;
 border: 2px #000 solid;
 position: absolute;
 background: #6c5844;
 border-radius: 50%;
 left: 50%;
 margin-left: -6px;
 top: 375px;
 transition: all 1s;
 }
 .neck p:nth-child(4){
 width: 2px;
 height: 8px;
 background: #000;
 position: absolute;
 left: 50%;
 margin-left: -1px;
 top: 385px;
 transition: all 1s;
 }

Partagez un exemple de code HTML pour créer un Doraemon animé

Le cou de Doraemon.png

Doraemon terminé L'effet dynamique d'un dream
Doraemon est plus mignon quand il bouge, non ? Alors faisons-le bouger (attribut de transition).
Déplacez la souris vers le contour des yeux et déplacez le globe oculaire gauche vers la gauche.
Déplacez la souris vers la bouche et l'expression du visage change.

Déplacez la souris vers la partie cloche et la cloche deviendra plus grande.

/*眼睛动效*/
.head:hover .face>p:first-child p{
 left: 0px;
 transition: all 1s;
 }
 .head:hover .face>p:first-child p p{
 left: 0px;
 transition: all 1s;
 }
/*嘴巴动效，嘴巴的dom容器下面要加了个空的p容器*/
.mouth p:first-child{
 width: 82px;
 height: 2px;
 background: #000;
 position: absolute;
 z-index: 1000;
 top: -25px;
 left: 6px;
 display: none;
 }
 .mouth p:nth-child(2){
 width: 82px;
 height: 2px;
 background: #000;
 position: absolute;
 z-index: 1000;
 top: -25px;
 left: 90px;
 display: none;
 }
 .mouth:hover{
 border-radius: 0;
 width: 180px;
 height: 200px;
 }
 .mouth:hover p:first-child,.mouth:hover p:nth-child(2){
 display: block;
 }
/*铃铛动效*/
.neck:hover p:first-child{
 width: 60px;
 height: 60px;
 left: 50%;
 margin-left: -30px;
 }
 .neck:hover p:nth-child(2){
 width: 66px;
 height: 7.5px;
 left: 50%;
 margin-left: -33px;
 }
 .neck:hover p:nth-child(3){
 width: 12px;
 height: 12px;
 left: 50%;
 margin-left: -6px;
 top: 385px;
 }
 .neck:hover p:nth-child(4){
 width: 2px;
 height: 12px;
 left: 50%;
 margin-left: 1px;
 top: 400px;
 }

Partagez un exemple de code HTML pour créer un Doraemon animé

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la différence entre px, em et pt en HTML et leur conversion mutuelleArticle suivant：Explication détaillée de la différence entre px, em et pt en HTML et leur conversion mutuelle

Articles Liés

Voir plus