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;}
第三只小青蛙
- 第三只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化,所以最主要的是画出左眼样式和嘴巴样式。
- 舌头的制作一个椭圆旋转对应的角度额按后被嘴巴遮挡住一部分制作而成,
第三只青蛙的舌头分解显示.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;
}

第四只小青蛙
- 第四只小青蛙相对于公共样式的变化是眼睛和嘴巴的变化,眼睛的眼珠里面有两个亮光点,嘴巴是大嘴巴并且可以一张一合,嘴巴里面还有一个小舌头。它的光晕处于一会有一会没有的状态。
<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,我们一起学前端!
html打造动画【系列2】- 可爱的蛙蛙表情的更多相关文章
- html打造动画【系列4】哆啦A梦
我相信每个人的童年都有一个哆啦a梦,一个小小的肚皮里装满了不可思议的哆啦a梦,一个在你无助伤心的时候陪在你身边的哆啦a梦,一个陪你胡思乱想陪你吃铜锣烧的哆啦a梦~今天我们就来画一个我们心中的哆啦a梦吧 ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- 【原】iOSCoreAnimation动画系列教程(二):CAKeyFrameAnimation【包会】
在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iOS核心动画CoreAnimation中CABasicAnimation ...
- 【WPF学习笔记】之如何点登录按钮时判断用户名密码进行登录:动画系列之(二)
...... 承接动画系列之(一)的代码: 再添加登录按钮代码进行登录,验证用户名和密码在数据库是否正确. 直接上代码: using System; using System.Collections. ...
- 《Flutter 动画系列一》25种动画组件超全总结
动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称&q ...
- 《Flutter 动画系列》组合动画
老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...
- 【Flutter 实战】17篇动画系列文章带你走进自定义动画
老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...
- android动画系列
Android 属性动画(Property Animation) 完全解析 (上 动画系列 - 传统View动画与Property动画基础及比较 [Android 基础]Animation 动画介绍和 ...
- 【蛙蛙推荐】Lucene.net试用
[蛙蛙推荐]Lucene.net试用 [简介] lucene.net好多人都知道的吧,反正我是最近才好好的看了一下,别笑我拿历史当新闻哦,不太了解Lucence的朋友先听我说两句哦.Lucene的 ...
随机推荐
- MySQL大量线程处于Opening tables的问题分析
[作者] 王栋:携程技术保障中心数据库专家,对数据库疑难问题的排查和数据库自动化智能化运维工具的开发有强烈的兴趣. [问题描述] 最近有一台MySQL5.6.21的服务器,在应用发布后,并发线程Thr ...
- python3中文件操作及编码
#之前一直没明白文件处理中的w和wb的区别到底是什么,#在看过视频后才知道,原来在linux里面是没有区别的,#但是在windows里面就能够看出区别来了#下面来个例子: with open(&quo ...
- Andrew Ng机器学习第五章——多变量线性回归
一.多变量线性回归的技巧之一——特征缩放 1.为什么要使用特征缩放? 特征缩放用来确保特征值在相似的范围之内. 设想这样一种情况(房价预测),两个特征值分别是房子的大小和卧室的数量.每个特征值所处的范 ...
- LeetCode题解-147 对链表进行插入排序 Medium
对链表进行插入排序. 插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插 ...
- IIS Express 配置 Json
在VS2013中调试D3官网的一些Sample过程中遇到了一个奇怪的问题:凡是Sample中使用的数据源是json文件时候,smaple 就无法在浏览器中正常运行.经调试后发现根本原因是IIS Exp ...
- (转)在 WebSphere Application Server 中修改主机名称并迁移概要文件
原文:https://www.ibm.com/developerworks/cn/websphere/techjournal/0905_webcon/0905_webcon.html 修改主机名 让我 ...
- 使用mysqldump备份单表数据,并使用navicat导出单表中部分字段到excel
今天工作上遇到一个问题,客户需要将生产环境上数据库中用户表中的用户名.登录名.邮箱三个字段导出到excel中,查了一下,分两个步骤完成了任务 1. 使用mysqldump命令将生产环境的user表备份 ...
- sublime text3在交互时解决input()函数无法使用的问题
1,打开sublime text3工具栏,依次点击View->Show Console菜单打开命令行, 2,在命令行里 输入代码 import urllib.request,o ...
- puppet的使用:puppet的hello world
这个例子完成将master节点上的一个文件放至agent节点上的功能 创建要传输的文件 echo "helloWorld" > /etc/puppet/modules/pup ...
- sql 函数字符串处理
--Description: 字符处理 --使用: 放到查询分析器里执行就可以了 --示例: select * from dbo.splitstr('12 44 45 50 56 87',' ') o ...