css手柄,CSS3 SVG 游戏手柄

CSS

语言:

CSSSCSS

确定

html {

font-size: 8px;

height: 100%;

}

body {

height: 100%;

margin: 0;

}

.bg0 {

background-color: black;

}

.bg1 {

background-color: #030303;

}

.bg2 {

background-color: #050505;

}

.bg3 {

background-color: #080808;

}

.bg4 {

background-color: #0a0a0a;

}

.bg5 {

background-color: #0d0d0d;

}

.bg6 {

background-color: #0f0f0f;

}

.bg7 {

background-color: #121212;

}

.bg8 {

background-color: #141414;

}

.bg9 {

background-color: #171717;

}

.bg10 {

background-color: #1a1a1a;

}

.bg11 {

background-color: #1c1c1c;

}

.bg12 {

background-color: #1f1f1f;

}

.bg13 {

background-color: #212121;

}

.bg14 {

background-color: #242424;

}

.bg15 {

background-color: #262626;

}

.bg16 {

background-color: #292929;

}

.bg17 {

background-color: #2b2b2b;

}

.bg18 {

background-color: #2e2e2e;

}

.bg19 {

background-color: #303030;

}

.bg20 {

background-color: #333;

}

.bg21 {

background-color: #363636;

}

.bg22 {

background-color: #383838;

}

.bg23 {

background-color: #3b3b3b;

}

.bg24 {

background-color: #3d3d3d;

}

.bg25 {

background-color: #404040;

}

.bg26 {

background-color: #424242;

}

.bg27 {

background-color: #454545;

}

.bg28 {

background-color: #474747;

}

.bg29 {

background-color: #4a4a4a;

}

.bg30 {

background-color: #4d4d4d;

}

.bg31 {

background-color: #4f4f4f;

}

.bg32 {

background-color: #525252;

}

.bg33 {

background-color: #545454;

}

.bg34 {

background-color: #575757;

}

.bg35 {

background-color: #595959;

}

.bg36 {

background-color: #5c5c5c;

}

.bg37 {

background-color: #5e5e5e;

}

.bg38 {

background-color: #616161;

}

.bg39 {

background-color: #636363;

}

.bg40 {

background-color: #666;

}

.bg41 {

background-color: dimgray;

}

.bg42 {

background-color: #6b6b6b;

}

.bg43 {

background-color: #6e6e6e;

}

.bg44 {

background-color: #707070;

}

.bg45 {

background-color: #737373;

}

.bg46 {

background-color: #757575;

}

.bg47 {

background-color: #787878;

}

.bg48 {

background-color: #7a7a7a;

}

.bg49 {

background-color: #7d7d7d;

}

.bg50 {

background-color: gray;

}

.bg51 {

background-color: #828282;

}

.bg52 {

background-color: #858585;

}

.bg53 {

background-color: #878787;

}

.bg54 {

background-color: #8a8a8a;

}

.bg55 {

background-color: #8c8c8c;

}

.bg56 {

background-color: #8f8f8f;

}

.bg57 {

background-color: #919191;

}

.bg58 {

background-color: #949494;

}

.bg59 {

background-color: #969696;

}

.bg60 {

background-color: #999;

}

.bg61 {

background-color: #9c9c9c;

}

.bg62 {

background-color: #9e9e9e;

}

.bg63 {

background-color: #a1a1a1;

}

.bg64 {

background-color: #a3a3a3;

}

.bg65 {

background-color: #a6a6a6;

}

.bg66 {

background-color: #a8a8a8;

}

.bg67 {

background-color: #ababab;

}

.bg68 {

background-color: #adadad;

}

.bg69 {

background-color: #b0b0b0;

}

.bg70 {

background-color: #b3b3b3;

}

.bg71 {

background-color: #b5b5b5;

}

.bg72 {

background-color: #b8b8b8;

}

.bg73 {

background-color: #bababa;

}

.bg74 {

background-color: #bdbdbd;

}

.bg75 {

background-color: #bfbfbf;

}

.bg76 {

background-color: #c2c2c2;

}

.bg77 {

background-color: #c4c4c4;

}

.bg78 {

background-color: #c7c7c7;

}

.bg79 {

background-color: #c9c9c9;

}

.bg80 {

background-color: #ccc;

}

.bg81 {

background-color: #cfcfcf;

}

.bg82 {

background-color: #d1d1d1;

}

.bg83 {

background-color: #d4d4d4;

}

.bg84 {

background-color: #d6d6d6;

}

.bg85 {

background-color: #d9d9d9;

}

.bg86 {

background-color: #dbdbdb;

}

.bg87 {

background-color: #dedede;

}

.bg88 {

background-color: #e0e0e0;

}

.bg89 {

background-color: #e3e3e3;

}

.bg90 {

background-color: #e6e6e6;

}

.bg91 {

background-color: #e8e8e8;

}

.bg92 {

background-color: #ebebeb;

}

.bg93 {

background-color: #ededed;

}

.bg94 {

background-color: #f0f0f0;

}

.bg95 {

background-color: #f2f2f2;

}

.bg96 {

background-color: whitesmoke;

}

.bg97 {

background-color: #f7f7f7;

}

.bg98 {

background-color: #fafafa;

}

.bg99 {

background-color: #fcfcfc;

}

.bg100 {

background-color: white;

}

.box1 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

}

.box2 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 2;

-webkit-flex: 2;

-ms-flex: 2;

flex: 2;

}

.box3 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 3;

-webkit-flex: 3;

-ms-flex: 3;

flex: 3;

}

.box4 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 4;

-webkit-flex: 4;

-ms-flex: 4;

flex: 4;

}

.box5 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 5;

-webkit-flex: 5;

-ms-flex: 5;

flex: 5;

}

.box6 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 6;

-webkit-flex: 6;

-ms-flex: 6;

flex: 6;

}

.box7 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 7;

-webkit-flex: 7;

-ms-flex: 7;

flex: 7;

}

.box8 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 8;

-webkit-flex: 8;

-ms-flex: 8;

flex: 8;

}

.box9 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 9;

-webkit-flex: 9;

-ms-flex: 9;

flex: 9;

}

.box10 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 10;

-webkit-flex: 10;

-ms-flex: 10;

flex: 10;

}

.box11 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 11;

-webkit-flex: 11;

-ms-flex: 11;

flex: 11;

}

.box12 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 12;

-webkit-flex: 12;

-ms-flex: 12;

flex: 12;

}

.box13 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 13;

-webkit-flex: 13;

-ms-flex: 13;

flex: 13;

}

.box14 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 14;

-webkit-flex: 14;

-ms-flex: 14;

flex: 14;

}

.box15 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 15;

-webkit-flex: 15;

-ms-flex: 15;

flex: 15;

}

.box16 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 16;

-webkit-flex: 16;

-ms-flex: 16;

flex: 16;

}

.box17 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 17;

-webkit-flex: 17;

-ms-flex: 17;

flex: 17;

}

.box18 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 18;

-webkit-flex: 18;

-ms-flex: 18;

flex: 18;

}

.box19 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 19;

-webkit-flex: 19;

-ms-flex: 19;

flex: 19;

}

.box20 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 20;

-webkit-flex: 20;

-ms-flex: 20;

flex: 20;

}

.box21 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 21;

-webkit-flex: 21;

-ms-flex: 21;

flex: 21;

}

.box22 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 22;

-webkit-flex: 22;

-ms-flex: 22;

flex: 22;

}

.box23 {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 23;

-webkit-flex: 23;

-ms-flex: 23;

flex: 23;

}

.column {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.full-height {

height: 100%;

}

.svg-circle {

background-image: url("/uploads/150801/circle-84173e.svg");

background-position: center;

background-repeat: no-repeat;

}

.svg-pill {

background-image: url("/uploads/150801/gb-start-button.svg");

background-position: center;

background-repeat: no-repeat;

}

.svg-pills {

background-image: url("/uploads/150801/gb-speaker.svg");

background-position: center;

background-repeat: no-repeat;

}

.rotate30 {

-webkit-transform: rotate(150deg);

-ms-transform: rotate(150deg);

transform: rotate(150deg);

}

.corners05 {

border-radius: 0.5rem;

}

.corners1 {

border-radius: 1rem;

}

.corners2 {

border-radius: 2rem;

}

.corners3 {

border-radius: 3rem;

}

.corner-br-8 {

border-bottom-right-radius: 8rem;

}

.corner-br-6 {

border-bottom-right-radius: 6rem;

}

@media all and (orientation: landscape) {

.hide-portrait {

display: none;

}

}

@media all and (orientation: portrait) {

.hide-landscape {

display: none;

}

}

.svg-landscape {

background-image: url("/uploads/150801/gba.svg");

background-position: center;

background-repeat: no-repeat;

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值