html打造可爱的蛙蛙表情-html教程

先感受一下全部表情包：

在开始之前先安利一个知识点：Flex弹性布局

• 我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

• 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇

• 另外还要对css中的伪元素有一定的了解：before、after

• 最后想要表情动起来，最主要的就是animation属性的使用了。

整体布局

• 我们先对整体座椅个布局，使各个表情能直观的展示在各个位置上，因为每个表情几乎占据的是一个正方形的空间，所以我们将每个青蛙表情水平展示在页面上，这里就用到了flex布局方式。

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

蛙蛙的通用样式

• 观察一个每一个蛙蛙表情，虽然每一个表情形态各异，但是它们的身体、嘴巴、眼睛、小红晕的位置和大小几乎都是一致，这些一致的样式我们可以写成公用样式，每个蛙蛙的特征再根据每个人蛙蛙的id写单个的样式进行重绘或者覆盖。

  
        
        
  
          
          
  
        
  
        
        
  
          
          
  
            
            
  
              
              
  
                
                
  
              
  
            
  
          
  
          
  
            
  
              
  
                
  
              
  
            
  
          
  
        
          
      
  /*蛙蛙身体部分样式*/.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;}

  蛙蛙基本公用样式.png

第一只小青蛙

第一只小青蛙

• 第一只小青蛙是在基本样式的基础上有一个嘴角上扬的动态效果，所以要完成第一只蛙蛙的绘制，只要在公用样式的基础上加上嘴巴的动效就可以了，dom结构也是一样的。

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

  第一只蛙蛙动图.gif

第二只小青蛙

• 第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的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;}

  第三只青蛙的舌头分解显示.png

        

          

            
            

          

        

        

          
          

            

              

                

              

            

          

          

            

              

                

              

            

          

        
    
      
/*第三只小青蛙的左眼眯眼样式*/.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;

以上就是html打造可爱的蛙蛙表情的详细内容，更多请关注 第一PHP社区 其它相关文章！