首先做一個項目的先想如何去實現(xiàn)它。比如做一個吃豆人，如圖：
167b84dcbf0d3ed647b6b8c4abd75f92.jpg
首先，需要分析這個吃豆人的組成部分。
上半部分嘴，下半部分嘴，豆基本就三個部分組成。
其次，怎么才能讓它吃豆呢?
需要嘴上下動，需要豆向著嘴的方向移動。
第一步，制作上部分嘴。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#shang{/*給這個id加屬性和參數(shù)*/
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;/*把現(xiàn)在正方體變成50像素的圓角，就是把正方形變成圓形。*/
}
</style>
<body>
<div id="shang"><!--創(chuàng)建一個id代表上部分嘴-->
</div>
</body>
</html>
結(jié)果如圖：
2017-12-02_193245.png
第二步，下半部分嘴，大部分代碼都是一樣的。復(fù)制粘貼就好。有一點不一樣的地方。代碼如下：
#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加屬性和參數(shù)*/
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;/*把現(xiàn)在正方體變成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:表示按什么方式來改變狀態(tài)*/
transform: rotate(270deg);/*旋轉(zhuǎn)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><!--創(chuàng)建一個id代表上部分嘴-->
<div id="xia"></div>
</body>
</html>
第四步，做豆。代碼如下：
#dou{
width: 20px;/*寬20像素*/
height: 20px;/*高20像素*/
position: absolute;/*設(shè)置球的絕對位置*/
top: 50px;/*離頂部50像素*/
left: 200px;/*離左邊200像素*/
background: yellow;/*背景顏色為黃色*/
border-radius:50px;/*圓角50像素*/
}
這樣的豆代碼復(fù)制三個，做成三個豆。
第五步，讓豆向嘴的方向動起來。整體代碼如下：
<!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;/*設(shè)置球的絕對位置*/
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>
注意：豆動畫一個新參數(shù)，延遲參數(shù)。
