css实现一个跳跃类游戏代码
代码语言:html
所属分类:游戏
代码描述:css实现一个跳跃类游戏代码,无js代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color:#34495e;
color:#fff;
font-family:sans-serif;
}
/* Game style*/input {
display:none;
}
.game {
display:flex;
flex-direction:column-reverse;
justify-content:center;
align-items:center;
height:90vh;
}
.buttons {
margin-top:30px;
display:flex;
justify-content:center;
}
.buttons >* {
position:absolute;
background-color:#9b59b6;
color:#fff;
font-weight:bold;
height:70px;
width:70px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
border:2px solid #8e44ad;
cursor:pointer;
display:none;
user-select:none;
}
.buttons >*:active {
opacity:0.8;
}
.screen {
width:50vw;
height:30vw;
border:2px solid #2c3e50;
background-color:#3498db;
position:relative;
overflow:hidden;
}
.over {
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
z-index:9;
background-color:#ecf0f1;
flex-direction:column;
justify-content:center;
align-items:center;
display:flex;
left:-100vw;
font-size:30px;
color:#2c3e50;
user-select:none;
}
.over.start {
left:initial;
}
.over.game_over {
color:#fff;
background-color:#c0392b;
}
.over label,.over a {
background-color:#f1c40f;
color:#fff;
font-weight:bold;
padding:10px 20px;
font-size:20px;
border:0;
cursor:pointer;
text-decoration:none;
}
.over a {
margin-top:30px;
}
.ground {
position:absolute;
bottom:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0