html游戏手柄,CSS3 游戏操控手柄

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800);

* {

box-sizing: border-box;

}

html {

transition: all 150ms linear;

-webkit-transition: all 150ms linear;

font-size: 6px;

}

body {

background: #373737;

color: #d9403b;

font-family: "Coda Caption", sans-serif;

}

.controller {

position: relative;

background: #d2d2d0;

margin: 1rem auto;

width: 30rem;

height: 14rem;

border-radius: 0.25rem;

}

.pad-area {

position: absolute;

background: #2b3334;

left: 1rem;

bottom: 1rem;

width: 28rem;

height: 10rem;

border-radius: 0.25rem;

}

.dpad {

position: absolute;

bottom: 1.5rem;

left: 1.5rem;

width: 6rem;

height: 6rem;

}

.cross {

position: absolute;

background: #111113;

border-radius: 0.2rem;

z-index: 5;

}

.cross.vert {

left: 2rem;

width: 2rem;

height: 6rem;

}

.cross.hor {

top: 2rem;

width: 6rem;

height: 2rem;

}

.cross-border {

position: absolute;

background: #d3d2ce;

border-radius: 0.2rem;

z-index: 5;

}

.cross-border.vert {

top: -0.25rem;

left: 1.75rem;

width: 2.5rem;

height: 6.5rem;

}

.cross-border.hor {

top: 1.75rem;

left: -0.25rem;

width: 6.5rem;

height: 2.5rem;

}

.center {

width: 8rem;

height: 100%;

margin: 0 9rem;

}

.gray-bar {

position: relative;

background: #9a9b96;

width: 100%;

height: 1.5rem;

border-radius: 0.25rem;

margin-bottom: 0.5rem;

}

.gray-bar.first {

border-top-left-radius: 0;

border-top-right-radius: 0;

}

.gray-bar.big {

background: #d3d2ce;

height: 2.55rem;

}

.gray-bar.last {

height: 0.925rem;

border-bottom-left-radius: 0;

border-bottom-right-radius: 0;

}

.gray-bar span {

margin-left: 0.65rem;

font-size: 0.75rem;

}

.skinny-button {

position: absolute;

background: #323735;

top: 0.75rem;

width: 3rem;

height: 1rem;

border-radius: 2rem;

}

.skinny-button.select {

left: 0.5rem;

}

.skinny-button.start {

right: 0.5rem;

}

.nintendo {

position: absolute;

right: 3.5rem;

top: 1.5rem;

}

.nintendo:after {

content: "®";

position: absolute;

font-size: 0.75rem;

top: -0.25rem;

right: -0.75rem;

}

.buttons {

position: absolute;

right: 1.5rem;

bottom: 1rem;

width: 8rem;

height: 3rem;

}

.button-pad {

position: relative;

float: right;

background: #d3d2ce;

margin-right: 1rem;

width: 3rem;

height: 3rem;

border-radius: 0.25rem;

}

.button {

background: #e4060b;

width: 2.5rem;

height: 2.5rem;

margin: 0.25rem auto;

border-radius: 50%;

}

.button-letter {

position: absolute;

font-size: 0.75rem;

right: 0;

}

@media screen and (min-width: 26rem) {

html {

font-size: 8px;

}

}

@media screen and (min-width: 34rem) {

html {

font-size: 10px;

}

}

@media screen and (min-width: 42rem) {

html {

font-size: 12px;

}

}

@media screen and (min-width: 48rem) {

html {

font-size: 14px;

}

}

@media screen and (min-width: 54rem) {

html {

font-size: 16px;

}

}