大嘴怪动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大嘴怪动画相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于大嘴怪动画的主要内容，如果未能解决你的问题，请参考以下文章