求图片：张嘴 放电 红嘴 绿皮 青蛙 蜥蜴 乱晃 疯狂 咆哮 动态图

青蛙又叫“田鸡”，两栖动物，表皮绿色，有黑色纹路且光滑，弹跳力很强。

蛤蟆术语为“蟾蜍”，又名癞蛤蟆，外形和青蛙相似，体形较青蛙略大，表皮为褐色，不光滑又疙瘩，成年蛤蟆不太会跳，一般只会在地上爬。

当然有些地方的方言中也有青蛙蛤蟆不分的情况。

先感受一下全部表情包：

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

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

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

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

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

<p class="container">

<!--所有表情的存放容器，flex布局，所有子项目水平显示，自动换行，水平居中显示，竖直方向从顶部开始-->

<p class="emoji-container">

<!--存放青蛙表情的大容器，控制大小间距之类的属性-->

<p class="icon">

<!--存放每一个青蛙表情的容器，控制每一个表情自己的位置和特征-->

<p class="frog" id="frog-n"></p></p></p></p>

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写单个的样式进行重绘或者覆盖。

<p class="frog" id="frog-1">

<!-- 蛙蛙的身体部分 -->

<p class="body">

<!-- 蛙蛙的嘴巴 -->

<p class="mouth"></p>

</p>

<!-- 蛙蛙的眼睛 -->

<p class="eyes">

<!-- 蛙蛙的左右眼睛 -->

<p class="eye eye-left">

<!-- 蛙蛙的内眼圈儿 -->

<p class="eye-inner">

<!-- 蛙蛙的眼珠 -->

<p class="pupil">

<!-- 蛙蛙眼圈里的光晕 -->

<p class="light"></p>

</p>

</p>

</p>

<p class="eye eye-right">

<p class="eye-inner">

<p class="pupil">

<p class="light"></p>

</p>

</p>

</p>

</p>

</p>

/蛙蛙身体部分样式/

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, 03);

}

/蛙蛙嘴巴部分样式，因为每个蛙蛙的嘴巴不一样，所以公共样式就只定义了位置/

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 38s linear 0s infinite;

animation: smile 38s 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，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）

<p class="frog" id="frog-2">

<p class="body">

<!--存放蛙蛙的脸颊红晕-->

<p class="blush"></p>

<!--加上大嘴巴的class big-month-->

<p class="mouth big-mouth"></p>

</p>

<p class="eyes">

<p class="eye eye-left">

<p class="eye-inner">

<p class="pupil">

<p class="light"></p>

</p>

</p>

</p>

<p class="eye eye-right">

<p class="eye-inner">

<p class="pupil">

<p class="light"></p>

</p>

</p>

</p>

</p>

</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, 03);

}

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 06s linear 0s infinite alternate;

animation: hearts 06s linear 0s infinite alternate;

}

@-webkit-keyframes hearts {0% {

-webkit-transform: scale(07);

transform: scale(07);

}100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes hearts {0% {

-webkit-transform: scale(07);

transform: scale(07);

}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

<p class="frog" id="frog-3">

<p class="body">

<p class="mouth">

<!--存放舌头样式的容器-->

<p class="toungue"></p>

</p>

</p>

<p class="eyes">

<!--左眼添加wink的样式，作为左眼眯眼样式-->

<p class="eye eye-left wink">

<p class="eye-inner">

<p class="pupil">

<p class="light"></p>

</p>

</p>

</p>

<p class="eye eye-right">

<p class="eye-inner">

<p class="pupil">

<p class="light"></p>

</p>

</p>

</p>

</p>

</p>

/第三只小青蛙的左眼眯眼样式/

icon frog eyes eyewink 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 eyewink eye-inner:before, icon frog eyes eyewink eye-inner:after {

content: '';

display: block;

width: 17px;

height: 3px;

background-color: #3F6A34;

}

icon frog eyes eyewink eye-inner:before {

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

position: absolute;

top: -4px;

left: 0;

}

icon frog eyes eyewink eye-inner:after {

-webkit-transform: rotate(-25deg);

transform: rotate(-25deg);

position: absolute;

top: 4px;

left: 0;

}

icon frog eyes eyewink 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;

to

这只青蛙叫Keroppi，音译：可乐比。

因为是《Hello Kitty》同一家公司出品的动画，所以没有单独的动画。不过你可以看看这两部《Hello Kitty与Keroppi之西游记》、《Hello Kitty与Keroppi之龙宫星大探险》卡通，里面会有这只青蛙的故事哦。

视频：http://wwwtudoucom/programs/view/3IjoOgFTZeg/isRenhe=1

详情：http://baikebaiducom/view/2924365htm

没办法才用放大这招，你这个是gif动态格式。想要连贯调高 最好的办法是 导入到flash里勾线重画，并且添加中间过度帧（画）。然后调整帧位置和位置。在最后一帧之后继续添加普通帧，直到你认为差不多位置。时间可以你自己定。

　　在平平淡淡的生活中，为了哄小宝宝睡觉，很多人都需要睡前故事吧。下面是我为大家整理的小青蛙和小白熊的争吵睡前故事，供大家参考借鉴，希望可以帮助到有需要的朋友。

　叽叽喳喳，哇哇啦啦，一大早，小兔子就被门外的吵闹声给吵醒了。发生什么事情啦？欢迎阅读下面的小故事！~

　一大早，小兔子窗外响起了吵架的声音。

　小白熊说：“冬天好！冬天我们可以不用吃不用喝，天天睡觉。我巴不得每天都是冬天！”

　小青蛙说：“夏天好，夏天能吃到香喷喷的莲蓬，还有好多小花小草，非常美！每天都是夏天就好了！”

　它们你一言我一语，争执不下。

　小兔子走出来，说：“你们一个说冬天好，一个说夏天好，试想一下，如果一年四季都是冬天的话，那大家就会被冻死，也不会有食物了。如果一年四季都是夏天，那大地还不被烤焦啦！”

　小白熊和小青蛙听了，都觉得小兔子说的很有道理，从那以后，它们不再争吵了。

　为什么一年会有四季呢？季节的`划分是以地球在围绕太阳公转轨道上的位置确定的。地球绕太阳公转的轨道是椭圆的，而且与其自转的平面有一个夹角。当地球在一年中不同的时候，处在公转轨道的不同位置时，地球上各个地方受到的太阳光照是不一样的，接收到太阳的热量不同，因此就有了季节的变化和冷热的差异。