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

jiaoyu121 2021-08-27 原文

可爱的小青蛙，一定想不到

  • 我们一般做水平三列布局都是用的float方法，将每一块浮动显示在同一行。这种方法会导致元素没有原来的高度属性，要用清除浮动来解决空间占据问题。对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
  • 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本语法查看博客：Flex 布局教程：语法篇
  • 另外还要对css中的伪元素有一定的了解：before、after
  • 最后想要表情动起来，最主要的就是animation属性的使用了。
  • 我们先对整体座椅个布局，使各个表情能直观的展示在各个位置上，因为每个表情几乎占据的是一个正方形的空间，所以我们将每个青蛙表情水平展示在页面上，这里就用到了flex布局方式。 
    1. <div class="container">
    2. <!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始-->
    3. <div class="emoji-container">
    4.    <!--存放青蛙表情的大容器，控制大小间距之类的属性-->
    5.     <div class="icon">
    6.        <!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征-->
    7.     <div class="frog" id="frog-n">
    8. </div></div></div></div>
    9. body {background-color: #F1FFE6;}
    10. .container {width: 950px;margin: 70px auto 0px auto;text-align: center;}
    11. .container .emoji-container {
    12. /*flex弹性布局，多用于左右并排布局，跟float的作用类似，不用清除浮动*/
    13. display: -webkit-box;   
    14. display: -ms-flexbox;
    15. display: flex;
    16. /*justify-content属性定义了项目在主轴上的对齐方式。center就是在x轴上居中显示*/
    17. -ms-grid-column-align: center;
    18.     justify-items: center;
    19. /*align-items属性定义项目在交叉轴上如何对齐。flex-start就是从y轴的最上端开始排列*/
    20. -webkit-box-align: start;
    21.     -ms-flex-align: start;
    22.         align-items: flex-start;
    23. /*flex-wrap属性定义，如果一条轴线排不下，如何换行。wrap：换行，第一行在上方。*/
    24. -ms-flex-wrap: wrap;
    25.     flex-wrap: wrap;
    26. }
    27. .container .emoji-container .icon {
    28. margin-right: 40px;
    29. margin-bottom: 40px;
    30. }
    31. .container .emoji-container .icon:nth-child(6n) {
    32. margin-right: 0px;
    33. }
    34. .icon {width: 125px;height: 120px;position: relative;}
    35. .icon .frog {position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
  • 观察一个每一个蛙蛙表情，虽然每一个表情形态各异，但是它们的身体、嘴巴、眼睛、小红晕的位置和大小几乎都是一致，这些一致的样式我们可以写成公用样式，每个蛙蛙的特征再根据每个人蛙蛙的id写单个的样式进行重绘或者覆盖。 
    1. <div class="frog" id="frog-1">
    2.       <!-- 蛙蛙的身体部分 -->
    3.       <div class="body">
    4.         <!-- 蛙蛙的嘴巴 -->
    5.         <div class="mouth"></div>
    6.       </div>
    7.       <!-- 蛙蛙的眼睛 -->
    8.       <div class="eyes">
    9.         <!-- 蛙蛙的左右眼睛 -->
    10.         <div class="eye eye-left">
    11.           <!-- 蛙蛙的内眼圈儿 -->
    12.           <div class="eye-inner">
    13.             <!-- 蛙蛙的眼珠 -->
    14.             <div class="pupil">
    15.               <!-- 蛙蛙眼圈里的光晕 -->
    16.               <div class="light"></div>
    17.             </div>
    18.           </div>
    19.         </div>
    20.         <div class="eye eye-right">
    21.           <div class="eye-inner">
    22.             <div class="pupil">
    23.               <div class="light"></div>
    24.             </div>
    25.           </div>
    26.         </div>
    27.       </div>        
    28.     </div>
    29. /*蛙蛙身体部分样式*/
    30. .icon .frog .body {width: 110px;height: 86px;background-color: #A3D768;
    31.                    border-radius: 50%;position: absolute;top: 25px;left: 0;right: 0;
    32.                     margin: auto;box-shadow: 4px 4px 0px 0px rgba(163, 215, 104, 0.3);
    33. }
    34. /*蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置*/
    35. .icon .frog .body .mouth {margin: auto;}
    36. .icon .frog .eyes {width: 86px;height: 35px;position: absolute;
    37.                    top: 8px;left: 0;right: 0;margin: auto;
    38. }
    39. /*蛙蛙眼睛部分样式*/
    40. .icon .frog .eyes .eye {width: 35px;height: 35px;}
    41. .icon .frog .eyes .eye:before {content: "";display: block;width: 100%;height: 100%;
    42.                                background-color: #A3D768;border-radius: 50%;
    43. }
    44. /*蛙蛙眼圈部分样式*/
    45. .icon .frog .eyes .eye .eye-inner {background-color: #fff;width: 80%;height: 80%;
    46.           position: absolute;top: 10%;left: 10%;border-radius: 50%;
    47. }
    48. /*蛙蛙眼珠部分样式*/
    49. .icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34;
    50.           width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%;
    51. }
    52. /*蛙蛙眼珠里的亮光部分样式*/
    53. .icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff;
    54.           width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%;
    55. }
    56. /*蛙蛙左右两边眼睛的位置*/
    57. .icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;}
    58. .icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}

    蛙蛙基本公用样式.png
  • 第一只小青蛙是在基本样式的基础上有一个嘴角上扬的动态效果，所以要完成第一只蛙蛙的绘制，只要在公用样式的基础上加上嘴巴的动效就可以了，dom结构也是一样的。 
    1. .frog#frog-1 .body .mouth {
    2. width: 18px;
    3. height: 22px;
    4. border-bottom: 3px solid #3F6A34;
    5. position: absolute;
    6. top: 6px;
    7. left: 0;
    8. right: 0;
    9. -webkit-animation: smile 3.8s linear 0s infinite;
    10.         animation: smile 3.8s linear 0s infinite;
    11. }
    12. @-webkit-keyframes smile {
    13. 0% {
    14.   border-radius: 0%;
    15. }
    16. 20% {
    17.   border-radius: 50%;
    18. }
    19. 70% {
    20.   border-radius: 50%;
    21. }
    22. }
    23. @keyframes smile {
    24. 0% {
    25.   border-radius: 0%;
    26. }
    27. 20% {
    28.   border-radius: 50%;
    29. }
    30. 70% {
    31.   border-radius: 50%;
    32. }
    33. }

    第一只蛙蛙动图.gif
    • 第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的div，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作） 
      1. <div class="frog" id="frog-2">    
      2.       <div class="body">
      3.         <!--存放蛙蛙的脸颊红晕-->
      4.         <div class="blush"></div>
      5.        <!--加上大嘴巴的class big-month-->
      6.         <div class="mouth big-mouth"></div>
      7.       </div>    
      8.       <div class="eyes">
      9.         <div class="eye eye-left">
      10.           <div class="eye-inner">
      11.             <div class="pupil">
      12.               <div class="light"></div>
      13.             </div>
      14.           </div>
      15.         </div>
      16.         <div class="eye eye-right">
      17.           <div class="eye-inner">
      18.             <div class="pupil">
      19.               <div class="light"></div>
      20.             </div>
      21.           </div>
      22.         </div>
      23.       </div>        
      24.     </div>
      25. /*第二只青蛙脸颊两边的红晕样式*/
      26. .icon .frog .body .blush {width: 75px;height: 9px;position: absolute;
      27.             top: 20px;left: 0;right: 0;margin: auto;
      28. }
      29. .icon .frog .body .blush:before, .icon .frog .body .blush:after {
      30.             content: "";display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%;
      31. }
      32. .icon .frog .body .blush:before {position: absolute;top: 0;left: 0;}
      33. .icon .frog .body .blush:after {position: absolute;top: 0;right: 0;}
      34. /*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/
      35. .icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%;
      36.             box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3);
      37. }
      38. .frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0;
      39. }
      40. /*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/
      41. .frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important;
      42. -webkit-animation: hearts 0.6s linear 0s infinite alternate;
      43.         animation: hearts 0.6s linear 0s infinite alternate;
      44. }
      45. @-webkit-keyframes hearts {
      46. 0% {
      47.   -webkit-transform: scale(0.7);
      48.           transform: scale(0.7);
      49. }
      50. 100% {
      51.   -webkit-transform: scale(1);
      52.           transform: scale(1);
      53. }
      54. }
      55. @keyframes hearts {
      56. 0% {
      57.   -webkit-transform: scale(0.7);
      58.           transform: scale(0.7);
      59. }
      60. 100% {
      61.   -webkit-transform: scale(1);
      62.           transform: scale(1);
      63. }
      64. }
      65. /*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/
      66. .frog#frog-2 .eye-inner:before, .frog#frog-2 .eye-inner:after {content: "";display: block;
      67.           height: 70%;width: 40%;background-color: #C71F1C;border-radius: 50% 50% 0 0;
      68. }
      69. .frog#frog-2 .eye-inner:before {position: absolute;top: 0;left: 5px;
      70.            -webkit-transform: rotate(-45deg);
      71.                     transform: rotate(-45deg);
      72. }
      73. .frog#frog-2 .eye-inner:after {position: absolute;top: 0;right: 5px;
      74.             -webkit-transform: rotate(45deg);
      75.                     transform: rotate(45deg);
      76. }
      77. .frog#frog-2 .eye-inner .pupil {display: none;}
第二只蛙蛙动图.gif
  • 第三只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化，所以最主要的是画出左眼样式和嘴巴样式。
  • 舌头的制作一个椭圆旋转对应的角度额按后被嘴巴遮挡住一部分制作而成，

    第三只青蛙的舌头分解显示.png
  1. <div class="frog" id="frog-3">
  2.         <div class="body">
  3.           <div class="mouth">
  4.             <!--存放舌头样式的容器-->
  5.             <div class="toungue"></div>
  6.           </div>
  7.         </div>
  8.         <div class="eyes">
  9.           <!--左眼添加wink的样式，作为左眼眯眼样式-->
  10.           <div class="eye eye-left wink">
  11.             <div class="eye-inner">
  12.               <div class="pupil">
  13.                 <div class="light"></div>
  14.               </div>
  15.             </div>
  16.           </div>
  17.           <div class="eye eye-right">
  18.             <div class="eye-inner">
  19.               <div class="pupil">
  20.                 <div class="light"></div>
  21.               </div>
  22.             </div>
  23.           </div>
  24.         </div>    
  25.       </div>
  26. /*第三只小青蛙的左眼眯眼样式*/
  27. .icon .frog .eyes .eye.wink .eye-inner {
  28.   background-color: transparent;
  29.   width: 17px;
  30.   height: 3px;
  31.   background-color: #3F6A34;
  32.   border-radius: 0;
  33.   position: absolute;
  34.   top: 15px;
  35.   left: 0;
  36.   right: 0;
  37.   margin: auto;
  38.   -webkit-transform: rotate(21deg);
  39.           transform: rotate(21deg);
  40. }
  41. .icon .frog .eyes .eye.wink .eye-inner:before, .icon .frog .eyes .eye.wink .eye-inner:after {
  42.   content: \'\';
  43.   display: block;
  44.   width: 17px;
  45.   height: 3px;
  46.   background-color: #3F6A34;
  47. }
  48. .icon .frog .eyes .eye.wink .eye-inner:before {
  49.   -webkit-transform: rotate(25deg);
  50.           transform: rotate(25deg);
  51.   position: absolute;
  52.   top: -4px;
  53.   left: 0;
  54. }
  55. .icon .frog .eyes .eye.wink .eye-inner:after {
  56.   -webkit-transform: rotate(-25deg);
  57.           transform: rotate(-25deg);
  58.   position: absolute;
  59.   top: 4px;
  60.   left: 0;
  61. }
  62. .icon .frog .eyes .eye.wink .pupil {
  63.   display: none;
  64. }
  65. /*第三只小青蛙的右眼亮光位置*/
  66. .frog#frog-3 .eye-right .light {
  67.   position: absolute;
  68.   top: 10%;
  69.   left: auto;
  70.   right: 10%;
  71. }
  72. /*第三只小青蛙的嘴巴吐舌头样式*/
  73. .frog#frog-3 .mouth {
  74.   width: 25px;
  75.   height: 25px;
  76.   position: absolute;
  77.   top: 5px;
  78.   left: 0;
  79.   right: 0;
  80.   -webkit-transform: rotate(23deg);
  81.           transform: rotate(23deg);
  82. }
  83. .frog#frog-3 .mouth:before {
  84.   content: "";
  85.   display: block;
  86.   border-bottom: 3px solid #3F6A34;
  87.   width: 100%;
  88.   height: 100%;
  89.   border-radius: 50%;
  90.   background-color: #A3D768;
  91.   z-index: 3;
  92.   position: absolute;
  93.   top: 0px;
  94.   left: 0;
  95. }
  96. .frog#frog-3 .toungue {
  97.   width: 16px;
  98.   height: 20px;
  99.   background-color: #C71F1C;
  100.   border-radius: 30px;
  101.   z-index: 2;
  102.   position: absolute;
  103.   top: 17px;
  104.   left: 4px;
  105.   -webkit-transform-origin: center top;
  106.           transform-origin: center top;
  107.   -webkit-animation: toungue 2.0s linear 0s infinite;
  108.           animation: toungue 2.0s linear 0s infinite;
  109. }
  110. @-webkit-keyframes toungue {
  111.   0% {
  112.     -webkit-transform: scale(1, 1);
  113.             transform: scale(1, 1);
  114.   }
  115.   40% {
  116.     -webkit-transform: scale(1, 1);
  117.             transform: scale(1, 1);
  118.   }
  119.   75% {
  120.     -webkit-transform: scale(1, 0);
  121.             transform: scale(1, 0);
  122.   }
  123. }
  124. @keyframes toungue {
  125.   0% {
  126.     -webkit-transform: scale(1, 1);
  127.             transform: scale(1, 1);
  128.   }
  129.   40% {
  130.     -webkit-transform: scale(1, 1);
  131.             transform: scale(1, 1);
  132.   }
  133.   75% {
  134.     -webkit-transform: scale(1, 0);
  135.             transform: scale(1, 0);
  136.   }
  137. }
  138. .frog#frog-3 .toungue:before {
  139.   content: "";
  140.   display: block;
  141.   width: 2px;
  142.   height: 4px;
  143.   background-color: #410a09;
  144.   position: absolute;
  145.   left: 0px;
  146.
版权声明：本文为jiaoyu121原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jiaoyu121/archive/2017/06/11/6986881.html

html打造动画【系列2】- 可爱的蛙蛙表情 - 狙击手+的更多相关文章

  1. ASP.NET Core on K8S深入学习（2）部署过程解析与Dashboard

    上一篇《K8S集群部署》中搭建好了一个最小化的K8S集群，这一篇我们来部署一个ASP.NET Core Web […]...

  2. Linux 常用简单命令 – 橙子楼

    Linux 常用简单命令 2016-12-02 21:21  橙子楼  阅读(1222)  评论(0)  编辑 […]...

  3. 读书笔记《Spring Boot实战 —— Java EE 开发的颠覆者》

    Spring框架是轻量级的企业级开发一站式解决方案 Spring使用简单的POJO Plain Old Jav […]...

  4. ueditor的简单用法 – 小白的日常

    ueditor的简单用法   先粘贴未使用ueditor之前的代码： <body> <lab […]...

  5. 【POJ – 2431】Expedition（优先队列）

    【POJ – 2431】Expedition（优先队列） Expedition 直接中文 Desc […]...

  6. Spring IOC 容器源码分析 – 填充属性到 bean 原始对象

    1. 简介 本篇文章，我们来一起了解一下 Spring 是如何将配置文件中的属性值填充到 bean 对象中的。 […]...

  7. linux – 查看/修改文件的修改时间

    1. 查看文件的时间  stat 命令，查看文件的状态 stat 3.log //查看某个文件的状态 stat […]...

  8. 电子元器件封装(Package)—分立器件 – 齐威王

    电子元器件封装(Package)—分立器件 贴片电阻常见封装有9种，用两种尺寸代码来表示。一种尺寸 […]...

随机推荐

  1. 在Windows下配置Linux远程开发环境

    利用vscode，在Windows下配置Linux远程开发环境 在Windows下配置Linux远程开发环境 […]...

  2. 第一次真正使用泛型

    背景 最近在做一个产品的版本设计功能，多个模块均涉及到版本管理，一开始着急上线，实现方式上是先完成一个模块的版 […]...

  3. Pyhton开源框架(加强版) – usepython

    Pyhton开源框架(加强版) info:Djangourl:https://www.oschina.net/ […]...

  4. 从零开始部署小型企业级虚拟桌面 — Vmware Horizon View 6 For Linux VDI

    环境说明 注，本套环境所用机器全部是64位的。 管理服务器载体：安装win7操作系统，通过VMware Wor […]...

  5. 软件测试 – 版本控制客户端 TortoiseSVN的下载、安装以及基本使用

    一、SVN的下载、安装以及中文设置。 　　TortoiseSVN 是可用于 Windows 系统的 Apach […]...

  6. 微信公众平台搜索文章会调用搜狗百科内容？

    　　早上ytkah进行微信公众平台开发时想找那个“公众平台测试帐号”，在手机端订阅号列表上端的“搜索文章”框中 […]...

  7. 程序员如何月入三万？码农你挣钱能力够养家吗？教你月薪3万秘诀！

    如今的社会节奏快，挣钱难，花钱容易，你是不是经常感觉到了月底，兜里空空，盼下月早点发工资，可以如果你的工资小于 […]...

  8. P6KE6.8CA直插TVS管参数详解，超全面

    过压电路保护器件瞬变电压抑制TVS二极管凭借其独特的产品优势（响应速度PS级、瞬态功率大、钳位电压低、电压精准 […]...

热门专题

脱离脚手架来配置
baby_duoduo
浏览器主页被劫持
3D建模软件中如何进行装配设计？
C#编写一个在asp.net
webpack之Loader
2017安装教程以及各类问题解决方案
Anaconda的安装和创建环境
云计算参考架构几例
大数据整体市场规模达1000亿，金融
强力密码暴力破解工具:hydra
C#通过NI-VISA操作Tektronix
什么是Mirai僵尸网络
hashmo
【完结】php+MySQL实战案例【九】总结及源码分享
使用Eclipse格式化代码
修改ID
jackyu888
配置jsp和html
推特接连宕机，天灾还是人祸？
带遮罩层的弹出层
展开目录

目录导航