<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>吃豆豆</title>
		<style>
			body {
				margin: 0;
				background-color: #a79066;
			}
			
			.mouth {
				width: 200px;
				height: 200px;
				/*margin-top: 100px ;*/
				margin: 200px 200px;
				border-radius: 100px 100px 100px 100px;
				animation: peas 1s infinite;
			}
			
			@keyframes peas {
				0% {
					/* 盒子-阴影 水平方向 垂直方向 模糊半径 阴影扩展（变大变小） 颜色 */
					box-shadow: 
					300px 0px 0px -80px #18642b, 
					450px 0px 0px -80px #18642b, 
					600px 0px 0px -80px #18642b, 
					750px 0px 0px -80px #18642b;
				}
				100% {
					/*通过box-shadow属性来画小圆*/
					box-shadow: 
					150px 0px 0px -80px #18642b, 
					300px 0px 0px -80px #18642b, 
					450px 0px 0px -80px #18642b, 
					600px 0px 0px -80px #18642b;
				}
			}
			
			.top,
			.bottom {
				width: 200px;
				height: 100px;
				margin-left: 150px;
				background-color: #ffc800;
			}
			
			.top {
				border-radius: 100px 100px 0 0;
				/*通过该属性绑定之前定义好的动画 动画名称 时间 循环*/
				animation: mouthTop 1s infinite;
			}
			
			.bottom {
				border-radius: 0 0 100px 100px;
				animation: mouthBottom 1s infinite;
			}
			
			@keyframes mouthTop {
				/*mouthTop是动画的名称*/
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(-30deg);
				}
				100% {
					transform: rotate(0deg);
				}
			}
			
			@keyframes mouthBottom {
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(30deg);
					/*通过transform属性来旋转*/
				}
				100% {
					transform: rotate(0deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="mouth">
			<div class="top"></div>
			<!--上嘴唇-->
			<div class="bottom"></div>
			<!--下嘴唇-->
		</div>
	</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.