HTML implémente une image animée - Doraemon

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

Définir le conteneur de Doraemon

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

  <!-- 哆啦A梦大容器 --><div class="doa"></div>
  /*哆啦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 à l'intérieur des deux yeux, il y aura donc plusieurs couches d'imbrication DOM. Bien sûr, les graphiques de base sont tous constitués de div + 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 border-radius est un attribut très couramment utilisé. Presque toutes les déformations de div en sont indissociables. face of border-radius Il doit être border-radius: 300px 300px 300px 300px/300px 300px 300px 300px; violet. Nous n'écrivons généralement pas le contenu après la barre oblique. La section barre oblique est la longueur horizontale et la barre oblique est la hauteur verticale. Par défaut, s'il n'y a pas d'écriture après. la barre avant, les dimensions 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 de la frontière sous la direction d'un chauffeur expérimenté en quelques minutes. Pourquoi ne montez-vous pas rapidement dans le bus ?

  <!-- 头 -->    
    <div class="head">
    <!-- 存放脸部的容器 -->
        <div class="face">
        <!-- 左眼大圈儿 -->
            <div>
            <!-- 左眼眼珠（黑色部分） -->
                <div>
                <!-- 左眼眼白，黑色里面的白色部分 -->
                    <div></div>
                </div>
            </div>
        <!-- 右眼大圈儿 -->
            <div>
            <!--右眼眼珠（黑色部分） -->
                <div>
                <!-- 右眼眼白，黑色里面的白色部分 -->
                    <div></div>
                </div>
            </div>
        </div>
        <!-- 红鼻子部分 -->
        <div class="nose">
        <!-- 红鼻子里面的白圈儿 -->
            <div></div>
        </div>
        <!-- 红鼻子下面的那根黑线，也属于鼻子部分  -->
        <div class="nose1"></div>
    </div>
  .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>div: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>div: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>div:first-child div{      width: 20px;     /*定义眼珠的大小*/      height: 25px;      background: #000;      border-radius: 50%;      position: absolute;  /*定义眼珠的位置，相对于眼眶的位置*/      top: 45px;      left: 60px;
    }  /*左瞳孔*/
    .face>div:first-child div div{      width: 10px;     /*定义黑色瞳孔的大小*/      height: 10px;      background: #ffffff;      border-radius: 50%;      position: absolute;  /*定义黑色瞳孔的位置，相对于眼珠的位置*/      top: 7px;      left: 10px;
    }  /*右眼珠和左眼珠画法一样*/
    .face>div:last-child div{      width: 20px;      height: 25px;      background: #000;      border-radius: 50%;      position: absolute;      top: 45px;
    }  /*右瞳孔和左瞳孔的画法一样*/
    .face>div:last-child div div{      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 div{      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 La bouche de Doraemon

• La bouche devrait être très simple en un coup d'œil, vous pouvez dire qu'elle est réalisée en utilisant border+border-radius.

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

  
  

  La bouche de Doraemon.png

Dessine la partie de la barbe de Doraemon

• En fait, pour la partie barbe, la méthode de dessin des barbes a déjà été introduite lors du dessin du HTML pour créer une animation dans l'article précédent [Série 3] - Kitten Smiley Animation, donc je ne le ferai pas ici. Je n’entrerai pas dans les détails, mais l’idée de base est la même.

  <!-- 胡须 -->
    <div class="beard">
    <!-- 左边胡须部分 -->
        <div class="left">
        <!-- 第一根胡须 -->
            <div></div>
            <!-- 第二根胡须 -->
            <div></div>
            <!-- 第三根胡须 -->
            <div></div>
        </div>
        <div class="right">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!-- 脖子部分的小白条部分 -->
        <span></span>
    </div>/*胡须样式*/.beard .left div: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 div: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 div: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 div: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 div: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 div: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;
    }

  
  

  Barbe de Doraemon.png

Dessinez la partie du cou de Doraemon (la partie du cou comprend la cloche)

• Le cou est la forme après déformation du div de base, 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.

  <!-- 脖 -->
    <div class="neck">
    <!-- 铃铛的圆形 -->
        <div></div>
        <!-- 铃铛的小圆角矩形 -->
        <div></div>
        <!-- 铃铛的小圆形 -->
        <div></div>
        <!-- 铃铛的小竖线 -->
        <div></div>
    </div>
  .neck{      width: 330px;      height: 200px;      border-radius: 50% 50% 20% 20% / 50% 50% 50% 50%;      background: #e30000;      margin: 80px auto;      z-index: 100;
    }  .neck div: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 div: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 div: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 div:nth-child(4){      width: 2px;      height: 8px;      background: #000;      position: absolute;      left: 50%;      margin-left: -1px;      top: 385px;      transition: all 1s;
    }

  
  

  Le cou de Doraemon.png

Complétez l'effet dynamique de Doraemon

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

  
  

  Doraemon animation.gif

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!