吃豆豆案例总结

效果图

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>吃豆豆</title><style>body{margin: 0;/*外边距*/background-color: black;}.mouth{width:200px;height: 200px;margin-top: 100px;border-radius: 100px 100px 100px 100px;box-shadow: 300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green,750px 0px 0px -80px green;animation:peas 1s infinite;}.mouth-top,.mouth-bottom{width: 200px;height: 100px;background-color: yellow;margin-left: 150px;}.mouth-top{border-radius: 100px 100px 0 0;/*transform: rotate(-30deg);*//*表示旋转 deg为度数单位 负数为逆时针*//*绑定动画 名称 时间 播放次数（默认为一次）infinite表示循环播放*/animation: mouth-top 1s infinite;}.mouth-bottom{border-radius: 0 0 100px 100px;/*transform: rotate(30deg);*//*正数为顺时针*/animation: mouth-bottom 1s infinite;}/*css3动画 关键帧 开始 中间 结束*/@keyframes mouth-top {0%{/*动画开始*/transform: rotate(0deg);}50%{/*动画中间*/transform: rotate(-30deg)}100%{/*动画结束*/transform: rotate(0deg);}}@keyframes mouth-bottom {0%{/*动画开始*/transform: rotate(0deg);}50%{/*动画中间*/transform: rotate(30deg)}100%{/*动画结束*/transform: rotate(0deg);}}@keyframes peas {0%{box-shadow:300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green,750px 0px 0px -80px green;}50%{box-shadow:225px 0px 0px -80px green,375px 0px 0px -80px green,525px 0px 0px -80px green,675px 0px 0px -80px green;}100%{box-shadow:150px 0px 0px -80px green,300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green;}}</style>
</head>
<body>
<div class="mouth"><div class="mouth-top"></div><div class="mouth-bottom"></div>
</div>
</body>
</html>

HTML部分

主要使用div 以及标签class

<div class="mouth"><div class="mouth-top"></div><div class="mouth-bottom"></div>
</div>

分析：
我们将这个黄嘴巴看做成上下两个半圆旋转一定的角度得到的。所以总体上在原有mouth（这里第一个div时用来规划主体的，不能省略。且在完成后不可以让基础的div出现。）的基础上规划两个div标签，分为上下两部分，表示上下两个半圆。

css部分

1.将盒子有矩形调试为圆形。

.mouth{width:200px;height: 200px;margin-top: 100px;border-radius: 100px 100px 100px 100px;box-shadow: 300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green,750px 0px 0px -80px green;animation:peas 1s infinite;/*这个标签让球动了起来，在动态部分*/}

标签总结：

画圆（基础盒子，不呈现）

border-radius:100px 100px 100px 100px;

border-radius:50%

该标签表示每个边缘逐渐变圆，方向分别为盒子的左上右上右下左下，当四个值相同时可以只写一个。如果在未知盒子的像素大小时，可以直接使用50%来表示圆。

画绿色的小球

box-shadow: 300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green,750px 0px 0px -80px green;

box-shadow 表示盒子的阴影，这里用阴影加以颜色，可以表示小球。
其后面的四个值分别表示 <横向纵向模糊半径大小颜色>。一次画一个小球（阴影），用逗号隔开就可以画多个小球。
ps：最后一个阴影不能加逗号，直接用分号隔开。

2.画黄色的嘴，并且动起来

  .mouth-top,.mouth-bottom{width: 200px;height: 100px;background-color: yellow;margin-left: 150px;}.mouth-top{border-radius: 100px 100px 0 0;animation: mouth-top 1s infinite;}.mouth-bottom{border-radius: 0 0 100px 100px;animation: mouth-bottom 1s infinite;}@keyframes mouth-top {0%{/*动画开始*/transform: rotate(0deg);}50%{/*动画中间*/transform: rotate(-30deg)}100%{/*动画结束*/transform: rotate(0deg);}}@keyframes mouth-bottom {0%{/*动画开始*/transform: rotate(0deg);}50%{/*动画中间*/transform: rotate(30deg)}100%{/*动画结束*/transform: rotate(0deg);}}

标签总结

1.同时对两个div进行修饰

 .mouth-top,.mouth-bottom{width: 200px;height: 100px;background-color: yellow;margin-left: 150px;}

对多个div同时进行修饰，每个div中间用逗号隔开。在这个花括号中的标签对这多个div同时有效。

2.分开刻画

  .mouth-top{border-radius: 100px 100px 0 0;animation: mouth-top 1s infinite;}.mouth-bottom{border-radius: 0 0 100px 100px;animation: mouth-bottom 1s infinite;}

.mouth-top 中的border-radius: 100px 100px 0 0;将前两个的值定位100px，表示圆弧，后两个值不变，则形成了半圆。
.mouth-top 中的animation: mouth-top 1s infinite;表示绑定动画。动画内容就是让半圆动起来，在@keyframes mouth-top中实现动画。这里这个标签只是绑定动画。animation 后面第一个位置写动画的名称，第二个位置写动画的周期，第三个位置写循环次数（ infinite 表示无限循环）。

3.动画标签

   @keyframes mouth-top {0%{transform: rotate(0deg);}50%{transform: rotate(-30deg)}100%{transform: rotate(0deg);}}@keyframes mouth-bottom {0%{transform: rotate(0deg);}50%{transform: rotate(30deg)}100%{transform: rotate(0deg);}}

@keyframes 是动画标签，该标签是通过关键帧的方式是静态的图形动起来。
标签后面紧接着动画名字如 @keyframes mouth-bottom这里的mouth-bottom就是动画名字，名字用于animation:中绑定。
对每一帧的刻画： transform: rotate(0deg); transform表示旋转图形，rotate表示旋转的角度，角度数用括号标明。
链接每一帧：

 @keyframes 动画名字{0%{}50%{}100%{}}

3.让绿色的小球动起来

@keyframes peas {0%{box-shadow:300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green,750px 0px 0px -80px green;}100%{box-shadow:150px 0px 0px -80px green,300px 0px 0px -80px green,450px 0px 0px -80px green,600px 0px 0px -80px green;}}

使用上面的标签完成。

吃豆豆