首先做一个项目的先想如何去实现它。比如做一个吃豆人，如图：
167b84dcbf0d3ed647b6b8c4abd75f92.jpg
首先，需要分析这个吃豆人的组成部分。
上半部分嘴，下半部分嘴，豆基本就三个部分组成。
其次，怎么才能让它吃豆呢?
需要嘴上下动，需要豆向着嘴的方向移动。
第一步，制作上部分嘴。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#shang{/*给这个id加属性和参数*/
width: 0px;/*给一个宽度，*/
height: 0px;/*给一个高度，*/
/*border-bottom:边界底部 solid:立方体 */
border-bottom: 50px solid yellow;/*上面的图形底部包裹一个50像素黄色的立方体*/
border-top: 50px solid yellow;/*上面的图形上部包裹一个50像素黄色的立方体*/
border-left: 50px solid yellow;/*上面的图形左部包裹一个50像素黄色的立方体*/
/*transparent:透明的*/
border-right: 50px solid transparent;/*上面的图形右部包裹一个50像素头透明的立方体*/
/*radius:半径*/
border-radius: 50px;/*把现在正方体变成50像素的圆角，就是把正方形变成圆形。*/
}
</style>
<body>
<div id="shang"><!--创建一个id代表上部分嘴-->
</div>
</body>
</html>
结果如图：
2017-12-02_193245.png
第二步，下半部分嘴，大部分代码都是一样的。复制粘贴就好。有一点不一样的地方。代码如下：
#xia{
width: 0px;
height: 0px;
border-bottom: 50px solid yellow;
border-top: 50px solid yellow;
border-left: 50px solid yellow;
border-right: 50px solid transparent;
border-radius: 50px;
/*margin:边缘*/
margin-top: -100px;/*边缘向上60像素，为了与上部分嘴重合*/
}
第三步，加入动画让嘴动起来。上部分嘴向下动，下部分嘴向上动，形成咬合的动作。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#shang{/*给这个id加属性和参数*/
width: 0px;/*给一个宽度，*/
height: 0px;/*给一个高度，*/
/*border-bottom:边界底部 solid:立方体 */
border-bottom: 50px solid yellow;/*上面的图形底部包裹一个50像素黄色的立方体*/
border-top: 50px solid yellow;/*上面的图形上部包裹一个50像素黄色的立方体*/
border-left: 50px solid yellow;/*上面的图形左部包裹一个50像素黄色的立方体*/
/*transparent:透明的*/
border-right: 50px solid transparent;/*上面的图形右部包裹一个50像素头透明的立方体*/
/*radius:半径*/
border-radius: 50px;/*把现在正方体变成50像素的圆角，就是把正方形变成圆形。*/
animation: shang 0.5s infinite ease;
}
#xia{
width: 0px;
height: 0px;
border-bottom: 50px solid yellow;
border-top: 50px solid yellow;
border-left: 50px solid yellow;
border-right: 50px solid transparent;
border-radius: 50px;
/*margin:边缘*/
margin-top: -100px;/*边缘向上60像素，为了与上部分嘴重合*/
animation: xia 0.5s infinite ease;
}
@keyframes shang{
0%{ /*transform:表示按什么方式来改变状态*/
transform: rotate(270deg);/*旋转270度*/
}
50%{
transform: rotate(360deg);
}
100%{
transform: rotate(270deg);
}
}
@keyframes xia{
0%{
transform: rotate(90deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}
</style>
<body>
<div id="shang"></div><!--创建一个id代表上部分嘴-->
<div id="xia"></div>
</body>
</html>
第四步，做豆。代码如下：
#dou{
width: 20px;/*宽20像素*/
height: 20px;/*高20像素*/
position: absolute;/*设置球的绝对位置*/
top: 50px;/*离顶部50像素*/
left: 200px;/*离左边200像素*/
background: yellow;/*背景颜色为黄色*/
border-radius:50px;/*圆角50像素*/
}
这样的豆代码复制三个，做成三个豆。
第五步，让豆向嘴的方向动起来。整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
#shang{
width:0px;
height: 0px;
border-top: 50px solid yellow;
border-bottom: 50px solid yellow;
border-left: 50px solid yellow;
border-right: 50px solid transparent;
border-radius: 50px;
animation: shang 0.5s infinite ease;
}
#xia{
width: 0px;
height: 0px;
border-bottom: 50px solid yellow;
border-top: 50px solid yellow;
border-left: 50px solid yellow;
border-right: 50px solid transparent;
border-radius: 50px;
/*margin:边缘*/
margin-top: -100px;/*边缘向上60像素，为了与上部分嘴重合*/
animation: xia 0.5s infinite ease;
}
#dou{
width: 20px;/*宽20像素*/
height: 20px;/*高20像素*/
position: absolute;/*设置球的绝对位置*/
top:50px;/*离顶部30像素*/
left: 200px;/*离左边160像素*/
background: yellow;/*背景颜色为黄色*/
border-radius:50px;/*圆角50像素*/
animation: dou 1s 0.33s infinite ease;/*0.33s代表延迟多少时间以后再运动*/
}
#dou1{
width:20px;
height: 20px;
background: yellow;
border-radius:50px;
position: absolute;
top: 50px;
left: 200px;
animation: dou 1s 0.66s infinite ease;
}
#dou2{
width:20px;
height: 20px;
border-radius:50px;
background: yellow;
position: absolute;
top: 50px;
left: 200px;
animation: dou 1s 0.99s infinite ease;
}
@keyframes shang{
0%{
transform: rotate(270deg);
}
50%{
transform: rotate(360deg);
}
100%{
transform: rotate(270deg);
}
}
@keyframes xia{
0%{
transform: rotate(90deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}
@keyframes dou{
0%{
left: 160px;
}
100%{
left: 10px;
}
}
</style>
<body>
<div id="shang"></div>
<div id="xia"></div>
<div id="dou"></div>
<div id="dou1"></div>
<div id="dou2"></div>
</div>
</body>
</html>
注意：豆动画一个新参数，延迟参数。
网友评论