<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大嘴怪动作制作</title>
<style type="text/css">
div{
display: block;/*呈块元素展示*/
width: 200px;
height: 100px;
}
#big-monster{
background: blue;
margin:100px;/*与左和上的距离*/
/*圆弧属性：左上 右上 右下 左下*/
border-radius: 100px 100px 0 0;
/*css3 动画执行 动画名称 动画时间 播放次数*/
animation:bigrotate 1s infinite ;
}
#small-monster{
background: blue;
margin-left:100px;
margin-top:-100px;
border-radius: 0 0 100px 100px;
animation:smallrotate 1s infinite ;
}
#kid{
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
margin: 80px;
}
#son{
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
margin: 25px;
}
@keyframes bigrotate{/*设置动画顺序*/
0%{transform: rotate(0deg);}/*deg：角度(顺时针)*/
50%{transform: rotate(-30deg);}
100%{transform: rotate(0deg);}
}
@keyframes smallrotate{/*设置动画顺序*/
0%{transform: rotate(0deg);}/*deg：角度(顺时针)*/
50%{transform: rotate(30deg);}
100%{transform: rotate(0deg);}
}
</style>
</head>
<body>
<div id="big-monster">
<div id="kid">
<div id="son">z</div>
</div>
</div>
<div id="small-monster">
</div>
</body>
</html>
