Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
AroriaNetwork
GitHub Repository: AroriaNetwork/3kho-backup
 Path: blob/main/projects/flappy-bird/css/main.css
1835 views
1
@-webkit-keyframes animLand {

2
    0% { background-position: 0px 0px; }

3
    100% { background-position: -335px 0px; }

4
 }

5
 @-moz-keyframes animLand {

6
    0% { background-position: 0px 0px; }

7
    100% { background-position: -335px 0px; }

8
 }

9
 @-o-keyframes animLand {

10
    0% { background-position: 0px 0px; }

11
    100% { background-position: -335px 0px; }

12
 }

13
 @keyframes animLand {

14
    0% { background-position: 0px 0px; }

15
    100% { background-position: -335px 0px; }

16
 }

17
 

18
 @-webkit-keyframes animSky {

19
    0% { background-position: 0px 100%; }

20
    100% { background-position: -275px 100%; }

21
 }

22
 @-moz-keyframes animSky {

23
    0% { background-position: 0px 100%; }

24
    100% { background-position: -275px 100%; }

25
 }

26
 @-o-keyframes animSky {

27
    0% { background-position: 0px 100%; }

28
    100% { background-position: -275px 100%; }

29
 }

30
 @keyframes animSky {

31
    0% { background-position: 0px 100%; }

32
    100% { background-position: -275px 100%; }

33
 }

34
 

35
 @-webkit-keyframes animBird {

36
    from { background-position: 0px 0px; }

37
    to { background-position: 0px -96px; }

38
 }

39
 @-moz-keyframes animBird {

40
    from { background-position: 0px 0px; }

41
    to { background-position: 0px -96px; }

42
 }

43
 @-o-keyframes animBird {

44
    from { background-position: 0px 0px; }

45
    to { background-position: 0px -96px; }

46
 }

47
 @keyframes animBird {

48
    from { background-position: 0px 0px; }

49
    to { background-position: 0px -96px; }

50
 }

51
 

52
 @-webkit-keyframes animPipe {

53
    0% { left: 900px; }

54
    100% { left: -100px; }

55
 }

56
 @-moz-keyframes animPipe {

57
    0% { left: 900px; }

58
    100% { left: -100px; }

59
 }

60
 @-o-keyframes animPipe {

61
    0% { left: 900px; }

62
    100% { left: -100px; }

63
 }

64
 @keyframes animPipe {

65
    0% { left: 900px; }

66
    100% { left: -100px; }

67
 }

68
 

69
 @-webkit-keyframes animCeiling {

70
    0% { background-position: 0px 0px; }

71
    100% { background-position: -63px 0px; }

72
 }

73
 @-moz-keyframes animCeiling {

74
    0% { background-position: 0px 0px; }

75
    100% { background-position: -63px 0px; }

76
 }

77
 @-o-keyframes animCeiling {

78
    0% { background-position: 0px 0px; }

79
    100% { background-position: -63px 0px; }

80
 }

81
 @keyframes animCeiling {

82
    0% { background-position: 0px 0px; }

83
    100% { background-position: -63px 0px; }

84
 }

85
 

86
 

87
 *,

88
 *:before,

89
 *:after

90
 {

91
    /* border box */

92
    -moz-box-sizing: border-box;

93
    -webkit-box-sizing: border-box;

94
    box-sizing: border-box;

95
    /* gpu acceleration */

96
    -webkit-transition: translate3d(0,0,0);

97
    /* select disable */

98
    -webkit-touch-callout: none;

99
    -webkit-user-select: none;

100
    -khtml-user-select: none;

101
    -moz-user-select: none;

102
    -ms-user-select: none;

103
    user-select: none;

104
 }

105
 

106
 html,

107
 body

108
 {

109
    height: 100%;

110
    overflow: hidden;

111
    font-family: monospace;

112
    font-size: 12px;

113
    color: #fff;

114
 }

115
 

116
 #gamecontainer

117
 {

118
    position: relative;

119
    width: 100%;

120
    height: 100%;

121
    min-height: 525px;

122
 }

123
 

124
 /*

125
 Screen - Game

126
 */

127
 #gamescreen

128
 {

129
    position: absolute;

130
    width: 100%;

131
    height: 100%;

132
 }

133
 

134
 #sky

135
 {

136
    position: absolute;

137
    top: 0;

138
    width: 100%;

139
    height: 80%;

140
    background-image: url('../assets/sky.png');

141
    background-repeat: repeat-x;

142
    background-position: 0px 100%;

143
    background-color: #4ec0ca;

144
 

145
    -webkit-animation: animSky 7s linear infinite;

146
    animation: animSky 7s linear infinite;

147
 }

148
 

149
 #flyarea

150
 {

151
    position: absolute;

152
    bottom: 0;

153
    height: 420px;

154
    width: 100%;

155
 }

156
 

157
 #ceiling

158
 {

159
    position: absolute;

160
    top: -16px;

161
    height: 16px;

162
    width: 100%;

163
    background-image: url('../assets/ceiling.png');

164
    background-repeat: repeat-x;

165
 

166
    -webkit-animation: animCeiling 481ms linear infinite;

167
    animation: animCeiling 481ms linear infinite;

168
 }

169
 

170
 #land

171
 {

172
    position: absolute;

173
    bottom: 0;

174
    width: 100%;

175
    height: 20%;

176
    background-image: url('../assets/land.png');

177
    background-repeat: repeat-x;

178
    background-position: 0px 0px;

179
    background-color: #ded895;

180
 

181
    -webkit-animation: animLand 2516ms linear infinite;

182
    animation: animLand 2516ms linear infinite;

183
 }

184
 

185
 #bigscore

186
 {

187
    position: absolute;

188
    top: 20px;

189
    left: 150px;

190
    z-index: 100;

191
 }

192
 

193
 #bigscore img

194
 {

195
    display: inline-block;

196
    padding: 1px;

197
 }

198
 

199
 #splash

200
 {

201
    position: absolute;

202
    opacity: 0;

203
    top: 75px;

204
    left: 65px;

205
    width: 188px;

206
    height: 170px;

207
    background-image: url('../assets/splash.png');

208
    background-repeat: no-repeat;

209
 }

210
 

211
 #scoreboard

212
 {

213
    position: absolute;

214
    display: none;

215
    opacity: 0;

216
    top: 64px;

217
    left: 43px;

218
    width: 236px;

219
    height: 280px;

220
    background-image: url('../assets/scoreboard.png');

221
    background-repeat: no-repeat;

222
 

223
    z-index: 1000;

224
 }

225
 

226
 #medal

227
 {

228
    position: absolute;

229
    opacity: 0;

230
    top: 114px;

231
    left: 32px;

232
    width: 44px;

233
    height: 44px;

234
 }

235
 

236
 #currentscore

237
 {

238
    position: absolute;

239
    top: 105px;

240
    left: 107px;

241
    width: 104px;

242
    height: 14px;

243
    text-align: right;

244
 }

245
 

246
 #currentscore img

247
 {

248
    padding-left: 2px;

249
 }

250
 

251
 #highscore

252
 {

253
    position: absolute;

254
    top: 147px;

255
    left: 107px;

256
    width: 104px;

257
    height: 14px;

258
    text-align: right;

259
 }

260
 

261
 #highscore img

262
 {

263
    padding-left: 2px;

264
 }

265
 

266
 #replay

267
 {

268
    position: absolute;

269
    opacity: 0;

270
    top: 205px;

271
    left: 61px;

272
    height: 115px;

273
    width: 70px;

274
    cursor: pointer;

275
 }

276
 

277
 .boundingbox

278
 {

279
    position: absolute;

280
    display: none;

281
    top: 0;

282
    left: 0;

283
    width: 0;

284
    height: 0;

285
    border: 1px solid red;

286
 }

287
 

288
 #player

289
 {

290
    left: 60px;

291
    top: 200px;

292
 }

293
 

294
 .bird

295
 {

296
    position: absolute;

297
    width: 34px;

298
    height: 24px;

299
    background-image: url('../assets/bird.png');

300
 

301
    -webkit-animation: animBird 300ms steps(4) infinite;

302
    animation: animBird 300ms steps(4) infinite;

303
 }

304
 

305
 .pipe

306
 {

307
    position: absolute;

308
    left: -100px;

309
    width: 52px;

310
    height: 100%;

311
    z-index: 10;

312
 

313
    -webkit-animation: animPipe 7500ms linear;

314
    animation: animPipe 7500ms linear;

315
 }

316
 

317
 .pipe_upper

318
 {

319
    position: absolute;

320
    top: 0;

321
    width: 52px;

322
    background-image: url('../assets/pipe.png');

323
    background-repeat: repeat-y;

324
    background-position: center;

325
 }

326
 

327
 .pipe_upper:after

328
 {

329
    content: "";

330
    position: absolute;

331
    bottom: 0;

332
    width: 52px;

333
    height: 26px;

334
    background-image: url('../assets/pipe-down.png');

335
 }

336
 

337
 .pipe_lower

338
 {

339
    position: absolute;

340
    bottom: 0;

341
    width: 52px;

342
    background-image: url('../assets/pipe.png');

343
    background-repeat: repeat-y;

344
    background-position: center;

345
 }

346
 

347
 .pipe_lower:after

348
 {

349
    content: "";

350
    position: absolute;

351
    top: 0;

352
    width: 52px;

353
    height: 26px;

354
    background-image: url('../assets/pipe-up.png');

355
 }

356
 

357
 #footer

358
 {

359
    position: absolute;

360
    bottom: 3px;

361
    left: 3px;

362
 }

363
 

364
 #footer a,

365
 #footer a:link,

366
 #footer a:visited,

367
 #footer a:hover,

368
 #footer a:active

369
 {

370
    display: block;

371
    padding: 2px;

372
    text-decoration: none;

373
    color: #fff;

374
 }

375