Partage de cas sur la façon de créer une expression animée de grenouille mignonne en HTML

Ressentez d'abord toutes les émoticônes :

Avant de commencer, faisons un point de connaissance : Disposition élastique flexible

• Nous utilisons généralement la méthode float pour créer des dispositions horizontales à trois colonnes et afficher chaque bloc flottant dans la même ligne. Cette méthode aura pour conséquence que l'élément n'aura pas l'attribut de hauteur d'origine et la suppression du flotteur est nécessaire pour résoudre le problème d'occupation de l'espace. C'est très gênant pour ces dispositions spéciales. Par exemple, le centrage vertical n'est pas facile à réaliser.

• En 2009, le W3C a proposé une nouvelle solution : la mise en page Flex, qui peut réaliser diverses mises en page de manière simple, complète et réactive. Actuellement, il est pris en charge par presque tous les navigateurs, ce qui signifie que vous pouvez désormais utiliser cette fonctionnalité en toute sécurité. Consultez le blog pour la grammaire de base : Tutoriel Flex Layout : Grammaire

• De plus, vous devez avoir une certaine compréhension des pseudo-éléments en CSS : avant, après

• Enfin, si vous souhaitez que l'expression bouge, le plus important est d'utiliser l'attribut animation.

Disposition globale

Nous disposons d'abord l'ensemble du siège de manière à ce que chaque expression puisse être affichée intuitivement dans chaque position, car chaque expression occupe presque un espace carré, nous affichez chaque expression de grenouille horizontalement sur la page, en utilisant la disposition flexible ici.

<p class="container">
<!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始-->
<p class="emoji-container">   
<!--存放青蛙表情的大容器，控制大小间距之类的属性-->    
<p class="icon">       
<!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征-->    
<p class="frog" id="frog-n"></p></p></p></p>
body {background-color: #F1FFE6;}
.container {width: 950px;margin: 70px auto 0px auto;text-align: center;}
.container .emoji-container {
/*flex弹性布局，多用于左右并排布局，跟float的作用类似，不用清除浮动*/
display: -webkit-box;   
display: -ms-flexbox;
display: flex;
/*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/
-ms-grid-column-align: center;
    justify-items: center;
/*align-items属性定义项目在交叉轴上如何对齐。flex-start就是从y轴的最上端开始排列*/
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
/*flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行，第一行在上方。*/
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.container .emoji-container .icon {
margin-right: 40px;
margin-bottom: 40px;
}
.container .emoji-container .icon:nth-child(6n) {
margin-right: 0px;
}
.icon {width: 125px;height: 120px;position: relative;}
.icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}

Styles généraux des grenouilles

Observez les expressions de chaque grenouille. Bien que chaque expression ait une forme différente, leurs corps, leurs bouches, leurs yeux et la position du petit rougissement sont les suivants. les tailles sont presque les mêmes. Nous pouvons écrire ces styles cohérents comme styles communs. Les caractéristiques de chaque grenouille peuvent être redessinées ou écrasées en écrivant un style unique basé sur l'identifiant de grenouille de chaque personne.

<p class="frog" id="frog-1">
      <!-- 蛙蛙的身体部分 -->
      <p class="body">
        <!-- 蛙蛙的嘴巴 -->
        <p class="mouth"></p>
      </p>
      <!-- 蛙蛙的眼睛 -->
      <p class="eyes">
        <!-- 蛙蛙的左右眼睛 -->
        <p class="eye eye-left">
          <!-- 蛙蛙的内眼圈儿 -->
          <p class="eye-inner">
            <!-- 蛙蛙的眼珠 -->
            <p class="pupil">
              <!-- 蛙蛙眼圈里的光晕 -->
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>        
    </p>
    /*蛙蛙身体部分样式*/
    .icon .frog .body {
    width: 110px;
    height: 86px;
    background-color: #A3D768;                   
    border-radius: 50%;
    position: absolute;
    top: 25px;left: 0;
    right: 0;                    
    margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3);
}
/*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/
.icon .frog .body .mouth {
margin: auto;
}
.icon .frog .eyes {
width: 86px;
height: 35px;
position: absolute;                   
top: 8px;
left: 0;right: 0;
margin: auto;
}
/*蛙蛙眼睛部分样式*/
.icon .frog .eyes .eye {width: 35px;height: 35px;}
.icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%;                               
background-color: #A3D768;border-radius: 50%;
}
/*蛙蛙眼圈部分样式*/
.icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%;          
position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙眼珠部分样式*/
.icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34;          
width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%;
}
/*蛙蛙眼珠里的亮光部分样式*/
.icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff;          
width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%;
}
/*蛙蛙左右两边眼睛的位置*/
.icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}.icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}

Style public de base de frog.png

La première petite grenouille

La première petite grenouille

La première petite grenouille a un effet dynamique de relever les coins de sa bouche en fonction du style de base, donc pour compléter le dessin de la première grenouille, il vous suffit d'ajouter l'animation de la bouche basée sur le style commun Ça y est, la structure dom est la même.

.frog#frog-1 .body .mouth {
width: 18px;height: 22px;
border-bottom: 3px solid #3F6A34;
position: absolute;top: 6px;left: 0;right: 0;
-webkit-animation: smile 3.8s linear 0s infinite;        
animation: smile 3.8s linear 0s infinite;
}
@-webkit-keyframes smile {
0% {  border-radius: 0%;
}
20% {  border-radius: 50%;
}
70% {  border-radius: 50%;
}
}
@keyframes smile {
0% {  border-radius: 0%;
}
20% {  border-radius: 50%;
}
70% {  border-radius: 50%;
}
}

La première grenouille animation.gif

La deuxième petite grenouille

La bouche du La deuxième petite grenouille a une grande bouche et il y a deux petits rougissements sur les joues. Les yeux sont remplis d'amour, donc un p rougissant doit être ajouté à la structure du dom, et le style de la bouche et des yeux doit être modifié en conséquence. . (Faire principalement la bouche, le rougissement et le coeur rouge)

<p class="frog" id="frog-2">    
      <p class="body">
        <!--存放蛙蛙的脸颊红晕-->
        <p class="blush"></p>
       <!--加上大嘴巴的class big-month-->
        <p class="mouth big-mouth"></p>
      </p>    
      <p class="eyes">
        <p class="eye eye-left">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>        
    </p>/*第二只青蛙脸颊两边的红晕样式*
    /.icon .frog .body .blush {width: 75px;height: 9px;position: absolute;            
    top: 20px;left: 0;right: 0;margin: auto;
}
.icon .frog .body .blush:before, .icon .frog .body .blush:after {            
content: "";
display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%;
}
.icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}
.icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}
/*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/
.icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%;            
box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3);
}
.frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0;
}
/*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/
.frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important;
-webkit-animation: hearts 0.6s linear 0s infinite alternate;        
animation: hearts 0.6s linear 0s infinite alternate;
}
@-webkit-keyframes hearts {0% {
  -webkit-transform: scale(0.7);          
  transform: scale(0.7);
}100% {
  -webkit-transform: scale(1);          
  transform: scale(1);
}
}
@keyframes hearts {0% {
  -webkit-transform: scale(0.7);          
  transform: scale(0.7);
}100% {
  -webkit-transform: scale(1);          
  transform: scale(1);
}
}
/*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/
.frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block;          
height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0;
}
.frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px;
           -webkit-transform: rotate(-45deg);                    
           transform: rotate(-45deg);
}
.frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px;
            -webkit-transform: rotate(45deg);                    
            transform: rotate(45deg);
}
.frog#frog-2 .eye-inner .pupil {display: none;}

La deuxième grenouille animation.gif

La troisième Une petite grenouille

• Les changements de la troisième petite grenouille par rapport au style commun sont les changements des yeux et de la bouche, donc le plus important est de dessiner le style de l'œil gauche et le style de la bouche.

• La langue est transformée en ellipse, tournée à l'angle correspondant et pressée, puis une partie de celle-ci est recouverte par la bouche
  

  <.>
  

  La décomposition de la langue de la troisième grenouille display.png

<p class="frog" id="frog-3">
        <p class="body">
          <p class="mouth">
            <!--存放舌头样式的容器-->
            <p class="toungue"></p>
          </p>
        </p>
        <p class="eyes">
          <!--左眼添加wink的样式，作为左眼眯眼样式-->
          <p class="eye eye-left wink">
            <p class="eye-inner">
              <p class="pupil">
                <p class="light"></p>
              </p>
            </p>
          </p>
          <p class="eye eye-right">
            <p class="eye-inner">
              <p class="pupil">
                <p class="light"></p>
              </p>
            </p>
          </p>
        </p>    
      </p>
/*第三只小青蛙的左眼眯眼样式*/
.icon .frog .eyes .eye.wink .eye-inner {
  background-color: transparent;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
  border-radius: 0;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(21deg);
          transform: rotate(21deg);
}
.icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after {
  content: &#39;&#39;;
  display: block;
  width: 17px;
  height: 3px;
  background-color: #3F6A34;
}
.icon .frog .eyes .eye.wink .eye-inner:before {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  position: absolute;
  top: -4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .eye-inner:after {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  position: absolute;
  top: 4px;
  left: 0;
}
.icon .frog .eyes .eye.wink .pupil {
  display: none;
}
/*第三只小青蛙的右眼亮光位置*/
.frog#frog-3 .eye-right .light {
  position: absolute;
  top: 10%;
  left: auto;
  right: 10%;
}
/*第三只小青蛙的嘴巴吐舌头样式*/
.frog#frog-3 .mouth {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
}
.frog#frog-3 .mouth:before {
  content: "";
  display: block;
  border-bottom: 3px solid #3F6A34;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #A3D768;
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0;
}
.frog#frog-3 .toungue {
  width: 16px;
  height: 20px;
  background-color: #C71F1C;
  border-radius: 30px;
  z-index: 2;
  position: absolute;
  top: 17px;
  left: 4px;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-animation: toungue 2.0s linear 0s infinite;
          animation: toungue 2.0s linear 0s infinite;
}
@-webkit-keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
@keyframes toungue {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  75% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}
.frog#frog-3 .toungue:before {
  content: "";
  display: block;
  width: 2px;
  height: 4px;
  background-color: #410a09;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 5px;
  margin: auto;
  opacity: 0.4;
}

La troisième animation de la grenouille.gif

La quatrième petite grenouille

Les changements de la quatrième petite grenouille par rapport au style commun sont les changements dans les yeux et la bouche. Il y a deux points lumineux dans les globes oculaires, et le. la bouche est une grande bouche qui peut être ouverte et fermée, il y a aussi une petite langue dans la bouche. Son halo est en train de disparaître depuis un moment.

<p class="frog" id="frog-4">
      <p class="body">
        <p class="mouth big-mouth">
          <p class="toungue"></p>
        </p>
      </p>    
      <p class="eyes">
        <!--控制另一个眼珠闪光点的样式extra-light-->
        <p class="eye eye-left extra-light">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
        <p class="eye eye-right extra-light">
          <p class="eye-inner">
            <p class="pupil">
              <p class="light"></p>
            </p>
          </p>
        </p>
      </p>
    </p>
/*第四只小青蛙眼珠另一个闪光点样式*/
.icon .frog .eyes .eye.extra-light .light {width: 40%;height: 40%;}
.icon .frog .eyes .eye.extra-light .light:before {content: "";display: block;width: 70%;
            height: 70%;background-color: #fff;border-radius: 50%;
}

La quatrième grenouille animation.gif

Les grenouilles restantes

Comment dessiner d'autres grenouilles Elles sont toutes écrites avec des caractères uniques styles basés sur des styles communs. La chose la plus importante est le contrôle des images d'animation. Diverses formes sont l'épissage des figures géométriques de base (utilisation raisonnable du carré, du rayon de bordure, de la transformation et de la position).

La quantité de code étant trop importante, je n'entrerai pas dans les détails dans l'article. L'essentiel est l'utilisation compétente des images d'animation ! (Dites les choses importantes trois fois).

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!