CSS动画实例：食豆人
设页面中有<div class="pacman"></div>，若定义. pacman的样式规则为：
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
可在页面中显示如图1所示的食豆人。
图1 食豆人
再在页面相同的位置放置一个食豆人。定义动画关键帧，使一个食豆人逆时针旋转90°，一个食豆人顺时针旋转90°，这样可得到食豆人的口张开和闭合的动画效果。
编写的HTML文件如下。
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="pacman"></div>
<div class="pacman"></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。
图2 食豆人的口张开闭合
再在页面添加3颗豆子，豆子在食豆人口张开的前方水平移动，移到食豆人的口中，呈现食豆人吃豆子的动画效果。
编写的HTML文件如下。
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
top:100px;
left:30px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
.bean
{
background-color:#e73068;
width:15px;
height:15px;
border-radius:50%;
position:absolute;
top:145px;
left:250px;
animation:move 1s var(--delay) infinite linear;
}
@keyframes move
{
75% { opacity:0.7;}
100% { transform:translate(-200px,0px);}
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="pacman"></div>
<div class="pacman"></div>
<div class="bean" style="--delay:0s;"></div>
<div class="bean" style="--delay:0.333s;"></div>
<div class="bean" style="--delay:0.666s;"></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。
图3 吃豆的食豆人
图3的食豆人比较懒，除了口张开闭合外，不移动，主动去吃豆。好在前方有豆子源源不断地往口中送，守株待兔到这份上，也算有大运了。
让食豆人移动起来，编写如下的HTML文件。
<!DOCTYPE html>
<html>
<title>食豆人</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.move-box
{
width:100px;
height:100px;
position: absolute;
animation:move 4s infinite linear;
}
.pacman
{
position: absolute;
width:0px;
height:0px;
border-right:50px solid transparent;
border-top:50px solid #e73068;
border-left:50px solid #e73068;
border-bottom:50px solid #e73068;
border-radius:50%;
}
.pacman:nth-child(1)
{
animation:rotate_up 0.5s infinite;
}
.pacman:nth-child(2)
{
animation:rotate_down 0.5s infinite;
}
@keyframes move
{
0%,100% { transform:translate(0,0) rotate(0deg); }
24% { transform:translate(300px,0) rotate(0deg); }
25% { transform:translate(300px,0) rotate(90deg); }
49% { transform:translate(300px,200px) rotate(90deg); }
50% { transform:translate(300px,200px) rotate(180deg); }
74% { transform:translate(0,200px) rotate(180deg); }
75% { transform:translate(0,200px) rotate(270deg); }
99% { transform:translate(0,0) rotate(270deg); }
}
@keyframes rotate_up
{
0% { transform:rotate(-90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(-90deg);}
}
@keyframes rotate_down
{
0% { transform:rotate(90deg);}
50% { transform:rotate(0deg);}
100% { transform:rotate(90deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="move-box">
<div class="pacman"></div>
<div class="pacman"></div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。
图4 移动的食豆人
