js+css实现锤子打猴子出洞小游戏代码

代码语言:html

所属分类:游戏

代码描述:js+css实现锤子打猴子出洞小游戏代码

代码标签: js css 锤子 猴子 出洞 游戏 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
 
<meta charset="UTF-8">

<style>
body
{
       
cursor: url(//repo.bfw.wiki/bfwrepo/icon/65b72d7d86b94.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_75,h_75,/quality,q_90), auto;
}
.dot {
   
position: relative;
   
overflow: hidden;
   
height: 75px;
   
width: 75px;
   
background-color: black;
   
border-radius: 50%;
   
padding: 25px 25px;
   
margin: 25px 25px;

}
.outerdiv {
 
text-align: center;
 
display: grid;
 
grid-template-columns: 200px 200px;
 
margin: 0 auto;
 
justify-content: center;
}
.outerdiv {
 
text-align: center;
 
display: grid;
 
grid-template-columns: 200px 200px;
 
margin: 0 auto;
 
justify-content: center;
}
h1
{
 
font-family: 'Kosugi', sans-serif;
 
font-size: 80px;
 
text-align: center;
}
img
{
 
position: absolute;
 
width: auto;
 
height: 100px;
 
max-width: 100px;
 
max-height: 150px;
 
top: 100%;
 
animation: pop 1.5s infinite;
 
left: 50%;
 
transform: translateX(-50%);
 
margin: 0 auto;
}

@keyframes pop {
 
50%{
   
top: 25%;
 
}
}

#mon1 {
 
animation-delay: 2s;

}

#mon2 {
 
animation-delay: 1.5s;

}
#mon3 {
 
animation-delay: 0.2s;

}
#mon4 {
 
animation-delay: 5s;

}
</style>
</head>
<body>


<h1>Whack a Monkey</h1>
<div>
 
<h3> Points:<span id="points">.........完整代码请登录后点击上方下载按钮下载查看

网友评论0