剪刀石头布游戏人机交互HTML,HTML5 剪刀石头布小游戏VS电脑

CSS

语言：

CSSSCSS

确定

html {

/* Chrome 10+, Saf5.1+ */

/* FF3.6+ */

/* IE10 */

/* Opera 11.10+ */

background: -webkit-linear-gradient(#fe8c00 10%, #f83600 90%);

/* W3C */

background: linear-gradient(#fe8c00 10%, #f83600 90%);

min-height: 100%;

}

html * {

outline: 0;

}

section {

height: 120px;

width: 600px;

position: absolute;

top: 50%;

left: 50%;

background-color: #fff;

padding: 10px;

margin-top: -100px;

margin-left: -210px;

border-radius: 6px;

box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4);

}

section button {

background: 0;

border: 0;

height: 120px;

width: 20%;

float: left;

}

section button .fa {

font-size: 80px;

display: block;

margin-bottom: 20px;

}

section button.win {

color: #15a015;

}

section button.loss {

color: #ff1515;

}

section button.tie {

color: #1515ff;

}

section .result {

position: absolute;

text-align: center;

font-size: 28px;

height: 40px;

color: #fff;

top: -40px;

right: 0;

left: 0;

}

aside {

background-color: #e9eaed;

padding-top: 50px;

padding-bottom: 50px;

position: fixed;

width: 200px;

bottom: 0;

left: 0;

top: 0;

overflow: scroll;

}

aside .legend {

position: fixed;

top: 0;

left: 0;

right: 0;

width: 200px;

background-color: #fff;

height: 50px;

border-top: 1px solid rgba(0, 0, 0, 0.1);

box-shadow: rgba(0, 0, 0, 0.15) 0 1px 10px 0;

}

aside .legend .me,

aside .legend .cpu {

height: 40px;

line-height: 40px;

font-size: 14px;

width: 50%;

float: left;

text-align: center;

padding: 0.3rem 0;

}

aside .history-item {

height: 40px;

font-size: 24px;

line-height: 40px;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

aside .history-item.win {

background-color: rgba(0, 150, 0, 0.1);

}

aside .history-item.loss {

background-color: rgba(150, 0, 0, 0.1);

}

aside .history-item.tie {

background-color: rgba(0, 0, 150, 0.1);

}

aside .history-item .fa {

text-align: center;

width: 50%;

}

aside .scoreboard {

position: fixed;

bottom: 0;

left: 0;

right: 0;

width: 200px;

background-color: #fff;

height: 50px;

border-top: 1px solid rgba(0, 0, 0, 0.1);

box-shadow: rgba(0, 0, 0, 0.15) 0 -1px 10px 0;

}

aside .scoreboard .win,

aside .scoreboard .loss,

aside .scoreboard .tie {

height: 40px;

line-height: 20px;

font-size: 11px;

width: 33.33333%;

float: left;

text-align: center;

padding: 0.3rem 0;

}