jquery+html5仿金山打字游戏特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+html5仿金山打字游戏特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery+html5仿金山打字游戏特效</title>
<script src="jquery.js"></script>
<script src="typegame.js"></script>
<script>
	$(function(){
		new typegame();
	})
</script>
</head>
<style>
	body{
		margin:0;
		background:url(game.jpg) no-repeat;
		background-size:cover;
		font-family: "幼圆";
		background:#E8F0F0;
		overflow:hidden;
	}
	.stop1{
		width:130px;
		height:50px;
		background:red;
		position:absolute;bottom:0;left:30px;
		text-align:center;
		cursor: pointer;
		background:url("stop.png");
		background-size:130px 50px;
		line-height:50px;
		color:#392112;
		font-size:16px;
		z-index:6666666;
		font-weight:bold;
	}
	.screen1{
		width:100%;
		height:100%;
		background:url(img/dz2.jpg) no-repeat;
		background-size:cover;
		margin:0 auto; padding:0;
		position:relative;overflow:hidden;
	}
	.xiabian{
		width:100%;
		height:40px;
		background:#000;
		position:absolute;bottom:0;right:0;
		opacity:0.8;
		filter:alpha(opacity=80);
	}
	@keyframes cg {
		0%{
			transform:translateY(-50%);
		}100%{
			transform:translateY(0%);
		}
	}
	@keyframes cgfont {
		0%{
			transform:scale(0,0);
		}100%{
			transform:scale(1,1);
		 }
	}
	body{
		background:#84B526;
	}
</style>
<body>
<div class="screen1">
</div>
<div class="stop1">暂停游戏</div>
<div class="xiabian"></div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)