HTML练习之吃豆豆小游戏

最新推荐文章于 2021-08-11 21:41:13 发布

McQueen_LT

最新推荐文章于 2021-08-11 21:41:13 发布

阅读量1k

点赞数

分类专栏：前端开发文章标签： css3 html animation css

本文链接：https://blog.csdn.net/McQueen_LT/article/details/111277431

版权

HTML 动画吃豆豆游戏开发 CSS关键帧

关键词由CSDN通过智能技术生成

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概述

闲来无聊，稍微学一点HTML的知识，动手写一个吃豆豆的小游戏，感觉蛮好玩的。这里把代码放在这，以防以后用的上，可以参考。

二、代码

已经将重点部分注释了，用的animation很有意思，方便，快捷。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吃豆豆</title>
		<style>
			.mouth{
				width: 200px;
				height: 200px;
				border-radius: 50%; /* 画个圆 */
				animation: peas 1s linear infinite; /* 动画播放 绑定keyframes: peas */
			}
			.mouthTop{ /* 上半个嘴巴*/
				width: 200px;
				height: 100px;
				background-color: pink;
				margin-left: 200px;
				margin-top: 100px;
				border-radius: 100px 100px 0 0;				
				animation: mouthTopK 1s linear infinite;
			}
			.mouthBottom{/* 下半个嘴巴*/
				width: 200px;
				height: 100px;
				background-color: pink;
				margin-left: 200px;
				margin-top: 0px;
				border-radius: 0 0 100px 100px;
				animation: mouthBottomK 1s linear infinite;				
			}
			@keyframes mouthTopK{ /* 上半个嘴巴关键帧 定义三个关键帧 */
				0%{
					transform: rotate(-30deg) ;
				}
				50%{
					transform: rotate(0deg) ;
				}
				100%{
					transform: rotate(-30deg) ;
				}
			}
			@keyframes mouthBottomK{
				0%{
					transform: rotate(30deg) ;
				}
				50%{
					transform: rotate(0deg) ;
				}
				100%{
					transform: rotate(30deg) ;
				}
			}
			@keyframes peas{ /* 定义豆豆的动画关键帧 */
				0%{
					box-shadow: 
					300px 0 0 -80px red,
					450px 0 0 -80px red,
					600px 0 0 -80px red,
					750px 0 0 -80px red;
				}
				100%{
					box-shadow: 
					150px 0 0 -80px red,
					300px 0 0 -80px red,
					450px 0 0 -80px red,
					600px 0 0 -80px red;
				}
			}
		</style>
	</head>
	<body>
		<div class="mouth">
			<div class="mouthTop">
			</div>
			<div class="mouthBottom">
			</div>
		</div>
	</body>
</html>