html打造动画【系列2】- 可爱的蛙蛙表情

先感受一下全部表情包：

在开始之前先安利一个知识点：Flex弹性布局
  • 我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
  • 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇
  • 另外还要对css中的伪元素有一定的了解：before、after
  • 最后想要表情动起来，最主要的就是animation属性的使用了。
整体布局
  • 我们先对整体座椅个布局，使各个表情能直观的展示在各个位置上，因为每个表情几乎占据的是一个正方形的空间，所以我们将每个青蛙表情水平展示在页面上，这里就用到了flex布局方式。

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

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

    蛙蛙基本公用样式.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结构上要加上红晕的div，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）

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

第二只蛙蛙动图.gif

第三只小青蛙
  • 第三只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，所以最主要的是画出左眼样式和嘴巴样式。
  • 舌头的制作一个椭圆旋转对应的角度额按后被嘴巴遮挡住一部分制作而成，

    第三只青蛙的舌头分解显示.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: ‘‘;
  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;
}

第三只蛙蛙动图.gif

第四只小青蛙
  • 第四只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，眼睛的眼珠里面有两个亮光点，嘴巴是大嘴巴并且可以一张一合，嘴巴里面还有一个小舌头。它的光晕处于一会有一会没有的状态。

    <div class="frog" id="frog-4">
      <div class="body">
        <div class="mouth big-mouth">
          <div class="toungue"></div>
        </div>
      </div>
      <div class="eyes">
        <!--控制另一个眼珠闪光点的样式extra-light-->
        <div class="eye eye-left extra-light">
          <div class="eye-inner">
            <div class="pupil">
              <div class="light"></div>
            </div>
          </div>
        </div>
        <div class="eye eye-right extra-light">
          <div class="eye-inner">
            <div class="pupil">
              <div class="light"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
/*第四只小青蛙眼珠另一个闪光点样式*/
.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%;
}

    第四只蛙蛙动图.gif

剩余的其它蛙蛙
  • 其它蛙蛙的画法都是基于通用样式的基础上对独特样式进行编写，最重要的是对动画帧的控制，各种形状就是基本几何图形的拼接（正方形，border-radius，transform，position的合理运用）。
  • 由于代码量太大我就不在文章里赘述，主要还是对动画帧的熟练运用！（重要的事情说三遍）。
  • 提供源码的下载地址，大家下下来运行一下，在调试其中调试一下css样式就可以很清楚的看明白了源码加群

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

时间： 2024-10-25 05:45:17

html打造动画【系列2】- 可爱的蛙蛙表情的相关文章

android动画系列

Android 属性动画(Property Animation) 完全解析 (上 动画系列 - 传统View动画与Property动画基础及比较 [Android 基础]Animation 动画介绍和实现 知乎

javascript动画系列第一篇——模拟拖拽

× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟拖拽.本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的

【WPF学习笔记】之点登录按钮时判断用户名密码进行登录：动画系列之（二）

...... 承接动画系列之(一)的代码: 再添加登录按钮代码进行登录,验证用户名和密码在数据库是否正确. 直接上代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Do

安卓动画系列之一,妙用Interpolator 快速实现弹球效果

一直很想写个动画系列,把自己学过的东西好好总结一下,无奈最近都在看源码忙的焦头烂额.现在先写个开篇,以后继续补充动画相关的文章.作为引起兴趣, 这里弹球效果作为一个小例子,顺便讲讲Animation动画中应该利用Interpolator来锦上添花. 这是个很简单的例子,但复杂的东西不都由诸多看似简单的元素组合而成的么. 网上搜索已经有很多关于Interpolator的介绍文章, 这里借用一大神的文章作为介绍http://blog.csdn.net/jason0539/article/detail

【原】iOSCoreAnimation动画系列教程（二）：CAKeyFrameAnimation【包会】

======================================================= 转载请注明 编程小翁@博客园,邮件[email protected],欢迎各位与我在C/C++/Objective-C/机器视觉等领域展开交流! ======================================================= 在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iO

自己动手打造工具系列之自动刷新简历

0×00 背景 话说搞安全的大佬们都非常忙,自己在一步一步成长中无暇顾及其他琐碎的事情,比如让猎头注意到各位大佬.如何让猎头和大厂注意到自己呢?第一.提高自己在整个行业的曝光度:第二.定时刷新自己的简历:还有第三,第四等等,各位发挥脑洞.针对第一点,很多大佬各有自己的办法,但是针对第二点其实我们有全自动化的解决方案,可以为自己相对地节约点时间.小弟今天就带来自己动手打造工具系列之自动刷新简历.本文主要是针对喜欢写工具的童鞋提供一些思路,并一步一步地分析思路和方法,起一个抛砖引玉的作用吧. 0×0

js 评论列表推送动画系列一

// qq音乐app观看mv的时候评论推送动画 看到了实现一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=

html打造动画【系列3】- 小猫笑脸动画

猫咪容器 咱们每次画一个图片,肯定先要确定一个容器,几确定一下图形的位置和大小. <div class="mao_box"> <div class="mao"></div> </div> body {margin: 0px;background: #F6F7A7;} .mao_box {position: relative;top: 50px ;} /*设置宽度并且居中显示*/ .mao {margin: 0 auto

html打造动画【系列1】- 萌萌的大白

每个人心中都有一个暖暖的大白,blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以,我愿意沦陷在大白的肚子里永远不出来,哈哈~毛球要失宠咯~ 哈哈哈 每个人都是独立的个体,大白也不例外,仔细观察大白有一个圆圆的头加一对黑溜溜的眼睛,没有腹肌的躯干和一颗裸露的心脏,圆滚滚的肚子两边一对宽厚的臂膀,仔细看还有两个萌萌哒小手指呢,最后一对粗的像大象一样的大腿才能支撑这软软的肚子嘛,哈哈~ 定义背景 因为大白是白的,所以我们可以定义一个深颜色的背景来突出一下大白,让我们在茫茫屏幕中