Erstellen Sie mit HTML einen niedlichen Froschausdruck

Spüren Sie zuerst alle Emoticons:

Bevor wir beginnen, sollten wir uns einen Wissenspunkt holen: Flex-Elastik-Layout

• Wir verwenden im Allgemeinen die Float-Methode, um horizontale dreispaltige Layouts zu erstellen und jeden Floating-Block in derselben Zeile anzuzeigen. Diese Methode führt dazu, dass das Element nicht über das ursprüngliche Höhenattribut verfügt und das Löschen des Floats erforderlich ist, um das Platzbelegungsproblem zu lösen. Bei diesen speziellen Layouts ist dies sehr unpraktisch. Beispielsweise ist eine vertikale Zentrierung nicht einfach zu erreichen.

• Im Jahr 2009 schlug W3C eine neue Lösung vor – das Flex-Layout, mit dem verschiedene Seitenlayouts einfach, vollständig und reaktionsschnell realisiert werden können. Derzeit wird es von fast allen Browsern unterstützt, was bedeutet, dass die Verwendung dieser Funktion jetzt sicher ist. Schauen Sie sich den Blog für grundlegende Grammatik an: Flex Layout Tutorial: Grammatik

• Außerdem müssen Sie ein gewisses Verständnis für Pseudoelemente in CSS haben: vorher, nachher

• Wenn Sie möchten, dass sich der Ausdruck bewegt, ist es am wichtigsten, das Animationsattribut zu verwenden.

Gesamtlayout

• Wir legen zunächst den Gesamtsitz so an, dass jeder Ausdruck in jeder Position intuitiv dargestellt werden kann, denn jedes Emoticon ist nahezu identisch Nehmen Sie einen quadratischen Raum ein, daher zeigen wir jedes Frosch-Emoticon horizontal auf der Seite an und verwenden hier das Flex-Layout.

  <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%;}

Allgemeine Froschstile

• Beobachten Sie jeden Ausdruck des Frosches, obwohl jeder Ausdruck unterschiedliche Formen hat, sie sind die Position und Größe Der Körper, der Mund, die Augen und die kleine Röte sind nahezu gleich. Wir können diese konsistenten Stile als gemeinsame Stile schreiben und dann einen einzelnen Stil für die Merkmale jedes Frosches entsprechend der Frosch-ID jeder Person schreiben, um sie neu zu zeichnen oder abzudecken.

  <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;}

  
  

  Frog basic public style.png

Der erste kleine Frosch

Der erster kleiner Frosch

• Der erste kleine Frosch hat einen dynamischen Effekt, da sich die Mundwinkel basierend auf dem Grundstil anheben. Um die Zeichnung des ersten Frosches zu vervollständigen, fügen Sie einfach Folgendes hinzu Die Animation des Mundes basiert auf dem üblichen Stil und die Dom-Struktur ist dieselbe.

  .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%;
  }
  }

  
  

  Der erste Froschanimation.gif

Der zweite kleine Frosch

• Der Mund des zweiten kleinen Frosches ist ein großer Mund, und auf den Wangen befinden sich zwei kleine Röte, daher muss die Röte zur Domstruktur hinzugefügt werden. Auch die Formen von Mund und Augen müssen entsprechend angepasst werden. (Hauptsächlich den Mund, das Rouge und das rote Herz herstellen)

  <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;}

  

Die zweite Froschanimation

Der dritte kleine Frosch

• Die Veränderungen des dritten kleinen Frosches im Vergleich zum öffentlichen Stil sind die Veränderungen der Augen und des Mundes, daher ist das Wichtigste das Zeichnen der linke Augenstil und der Mundstil.

• Die Zunge wird in eine Ellipse geformt, im entsprechenden Winkel gedreht und gedrückt, und dann wird ein Teil davon vom Mund bedeckt 🎜>
  

  Die Zunge des dritten Frosches ist zersetzt.png
  
  

Das obige ist der detaillierte Inhalt vonErstellen Sie mit HTML einen niedlichen Froschausdruck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!