Créez une jolie expression de grenouille en utilisant HTML-tutoriel HTML-php.cn

Expérimentez 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 sur 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 sera utilisée 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 générale

Nous disposons d'abord le siège global de manière à ce que chaque expression puisse être affichée intuitivement dans chaque position, car chacune Les émoticônes presque occupent un espace carré, nous affichons donc chaque émoticône de grenouille horizontalement sur la page, en utilisant la disposition flexible ici.

<div class="container"><!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始--><div class="emoji-container">   <!--存放青蛙表情的大容器，控制大小间距之类的属性--><div class="icon">       <!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征--><div class="frog" id="frog-n"></div></div></div></div>
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%;}

Copier après la connexion

Styles généraux de grenouilles

Observez chaque expression de grenouille Bien que chaque expression ait des formes différentes, elles sont la position et la taille. du corps, de la bouche, des yeux et du petit rougissement sont presque les mêmes. Nous pouvons écrire ces styles cohérents comme styles communs, puis écrire un style unique pour les caractéristiques de chaque grenouille en fonction de l'identifiant de grenouille de chaque personne pour le redessiner ou la couverture.

<div class="frog" id="frog-1">
      <!-- 蛙蛙的身体部分 -->
      <div class="body">
        <!-- 蛙蛙的嘴巴 -->
        <div class="mouth"></div>
      </div>
      <!-- 蛙蛙的眼睛 -->
      <div class="eyes">
        <!-- 蛙蛙的左右眼睛 -->
        <div class="eye eye-left">
          <!-- 蛙蛙的内眼圈儿 -->
          <div class="eye-inner">
            <!-- 蛙蛙的眼珠 -->
            <div class="pupil">
              <!-- 蛙蛙眼圈里的光晕 -->
              <div class="light"></div>
            </div>
          </div>
        </div>
        <div class="eye eye-right">
          <div class="eye-inner">
            <div class="pupil">
              <div class="light"></div>
            </div>
          </div>
        </div>
      </div>        
    </div>/*蛙蛙身体部分样式*/.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;}

Copier après la connexion

Frog basic public style.png

La première petite grenouille

La première petite grenouille a un effet dynamique avec les coins de sa bouche relevés en fonction du style de base, donc pour compléter le dessin de la première grenouille, il suffit d'ajouter le animation de la bouche basée sur le style commun, et 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%;
}
}

Copier après la connexion

La première grenouille animation.gif

La deuxième petite grenouille

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

<div class="frog" id="frog-2">    
      <div class="body">
        <!--存放蛙蛙的脸颊红晕-->
        <div class="blush"></div>
       <!--加上大嘴巴的class big-month-->
        <div class="mouth big-mouth"></div>
      </div>    
      <div class="eyes">
        <div class="eye eye-left">
          <div class="eye-inner">
            <div class="pupil">
              <div class="light"></div>
            </div>
          </div>
        </div>
        <div class="eye eye-right">
          <div class="eye-inner">
            <div class="pupil">
              <div class="light"></div>
            </div>
          </div>
        </div>
      </div>        
    </div>/*第二只青蛙脸颊两边的红晕样式*/.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;}

Copier après la connexion

La deuxième animation grenouille

La troisième petite grenouille

Les changements de la troisième petite grenouille par rapport au style du public 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 langue de la troisième grenouille est décomposée.png

<div class="frog" id="frog-3">
        <div class="body">
          <div class="mouth">
            <!--存放舌头样式的容器-->
            <div class="toungue"></div>
          </div>
        </div>
        <div class="eyes">
          <!--左眼添加wink的样式，作为左眼眯眼样式-->
          <div class="eye eye-left wink">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>    
      </div>/*第三只小青蛙的左眼眯眼样式*/.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;

Copier après la connexion

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!

Étiquettes associées：

html 动画打造 série

source：php.cn

Article précédent：Petites astuces : attribut pixelTop en js Article suivant：Partager une question d'algorithme liée au front-end

Déclaration de ce site Web

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

Derniers articles par auteur