html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏

た入场券 2022-10-05 12:50 220阅读 0赞

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Covered+By+Your+Grace);

.restart \{

position: absolute;

margin-top: 20px;

font-family: 'Covered By Your Grace', cursive;

font-size: 26px;

cursor: pointer;

z-index: 9999;

body \{

background: \#222;

overflow: hidden;

.overlay \{

position: absolute;

height: 100%;

width: 100%;

z-index: 999;

display: none;

.stop \{

display: block;

.sky \{

position: absolute;

top: 0;

left: 0;

background: linear-gradient(to bottom, \#1e5799 0%, rgba(125, 185, 232, 0) 100%);

width: 100%;

height: 50px;

\#cloud \{

positon: absolute;

margin-left: 70px;

margin-top: 20px;

width: 140px;

\#cloud div \{

width: 130px;

border-radius: 48%;

background-color: ghostwhite;

display: inline-block;

\#cloud div:nth-child(1) \{

height: 43px;

\#cloud div:nth-child(2) \{

height: 63px;

margin-left: -20px;

\#cloud div:nth-child(3) \{

height: 51px;

margin-left: -20px;

.headline,

.subheadline \{

height: 80px;

width: 120px;

position: absolute;

left: 100px;

top: 100px;

margin: auto;

font-family: 'Covered By Your Grace', cursive;

font-size: 72px;

font-weight: 700;

transition: all 0.3s ease;

\-webkit-text-stroke: 0.4px red;

text-shadow: 2px 2px 15px red;

transform: rotate(-20deg);

border-bottom: 2px solid darkred;

z-index: 9;

.subheadline \{

font-size: 23px;

top: 155px;

left: 130px;

width: 250px;

border-bottom: none;

text-shadow: none;

\-webkit-text-stroke: initial;

color: white;

font-weight: 100;

.road \{

position: fixed;

top: -100px;

right: 0;

bottom: 0;

left: 0;

margin: auto;

height: 140%;

width: 20%;

background: black;

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%, \#000 25%, \#000 100%);

border-left: 2px solid white;

border-right: 2px solid white;

transition: all 5s ease;

transform: perspective(400px) rotatex(55deg);

cursor: url(http://i.imgur.com/qwyvJtC.png) 25 15, auto;

body.start .road \{

animation: roll 70s infinite;

animation-delay: 1s;

opacity: 1;

.roadstripes \{

height: 50px;

width: 10px;

border-left: 3px solid white;

position: absolute;

top: 200px;

left: 0;

right: 0;

bottom: 110%;

margin: auto;

.roadstripes.b \{

left: 150px;

.roadstripes.c \{

left: -150px;

body.start .roadstripes \{

transition: all ease-in;

animation: opac 1.3s infinite;

.tree \{

position: absolute;

left: 400px;

bottom: 90%;

height: 100px;

width: 70px;

background-image: url(http://orig15.deviantart.net/4f7c/f/2011/110/e/d/pixel\_tree\_v2\_by\_spell1337-d3drdue.png);

background-size: cover;

transform: perspective(100px) rotatex(-30deg);

.treeb \{

position: absolute;

left: -100px;

bottom: 100%;

height: 70px;

width: 50px;

background-image: url(/uploads/150601/pixel\_tree\_v2\_by\_spell1337-d3drdue.png);

background-size: cover;

transform: perspective(100px) rotatex(-30deg);

.bush \{

position: absolute;

left: -50px;

bottom: 90%;

height: 50px;

width: 50px;

background-size: cover;

transform: perspective(100px) rotatex(-30deg);

.police \{

position: absolute;

height: 60px;

width: 60px;

opacity: 0;

transition: opacity 0.2s ease;

.civilian \{

position: absolute;

left: 30px;

height: 41px;

width: 54px;

opacity: 0;

background-repeat: no-repeat;

background-size: cover;

transition: opacity 0.2s ease;

.wire \{

position: absolute;

height: 10px;

width: 60px;

background-repeat: no-repeat;

opacity: 0;

transition: opacity 0.2s ease;

.wire.b \{

left: 80%;

.gameover \{

width: 100%;

height: 500px;

position: absolute;

top: 700px;

left: 0;

right: 0;

bottom: 0px;

margin: auto;

color: red;

font-family: 'Covered By Your Grace', cursive;

text-align: center;

line-height: 10px;

visibility: hidden;

font-size: 26px;

.show \{

visibility: visible;

.gameover h1 \{

font-size: 36px;

.gameover h2 \{

font-size: 18px;

.civilian.b \{

left: 200px;

body.start .civilian \{

animation: civiliana 17s infinite;

animation-delay: 10s;

opacity: 1;

transition-delay: 10s;

body.start .civilian.b \{

animation: civilianb 14s infinite;

animation-delay: 20s;

opacity: 1;

transition-delay: 20s;

body.start .police.a \{

animation: policedrivinga 9s infinite;

animation-delay: 3s;

opacity: 1;

transition-delay: 3s;

body.start .police.b \{

animation: policedrivingb 8s infinite;

animation-delay: 9s;

opacity: 1;

transition-delay: 9s;

body.start .police.c \{

animation: policedrivingb 7s infinite;

animation-delay: 14s;

opacity: 1;

transition-delay: 14s;

body.start .police.d \{

animation: policedrivingd 6s infinite;

animation-delay: 18s;

opacity: 1;

transition-delay: 18s;

body.start .police.e \{

animation: policedrivinge 5s infinite;

animation-delay: 22s;

opacity: 1;

transition-delay: 22s;

body.start .police.f \{

animation: policedrivingf 4s infinite;

animation-delay: 25s;

opacity: 1;

transition-delay: 25s;

body.start .police.g \{

animation: policedrivingg 3s infinite;

animation-delay: 28s;

opacity: 1;

transition-delay: 28s;

body.start .police.h \{

animation: policedrivingh 4s infinite;

animation-delay: 32s;

opacity: 1;

transition-delay: 32s;

body.start .police.i \{

animation: policedrivingi 2.5s infinite;

animation-delay: 40s;

opacity: 1;

transition-delay: 40s;

body.start .police.j \{

animation: policedrivingj 2.5s infinite;

animation-delay: 43;

opacity: 1;

transition-delay: 43s;

body.start .wire \{

animation: wire 8s infinite;

animation-delay: 36s;

opacity: 1;

transition-delay: 36s;

body.start .wire.b \{

animation: wire 7s infinite;

animation-delay: 39s;

opacity: 1;

transition-delay: 39s;

body.start .tree \{

animation: treeani 5s infinite;

body.start .treeb \{

animation: treeanib 9s infinite;

body.start .bush \{

animation: bush 7s infinite;

@keyframes opac \{

0% \{

bottom: 110%;

100% \{

bottom: -100%;

@keyframes treeani \{

0% \{

bottom: 90%;

100% \{

bottom: -100%;

transform: perspective(100px) rotatex(-150deg);

@keyframes treeanib \{

0% \{

bottom: 100%;

100% \{

bottom: -100%;

transform: perspective(100px) rotatex(-150deg);

@keyframes bush \{

0% \{

bottom: 90%;

100% \{

bottom: -100%;

transform: perspective(100px) rotatex(-150deg);

@keyframes wire \{

0% \{

bottom: 90%;

100% \{

bottom: -100%;

@keyframes civiliana \{

0% \{

bottom: 90%;

100% \{

bottom: -100%;

@keyframes civilianb \{

/\*POLICE\*/

0% \{

bottom: 90%;

100% \{

bottom: -100%;

@keyframes policedrivinga \{

0% \{

bottom: 90%;

left: 0;

right: 0;

20% \{

left: 80%;

40% \{

left: 70%;

100% \{

bottom: -100%;

@keyframes policedrivingb \{

0% \{

bottom: 90%;

left: 150px;

right: 0;

20% \{

left: 10%;

40% \{

left: 30%px;

100% \{

bottom: -100%;

@keyframes policedrivingc \{

0% \{

bottom: 90%;

left: 90%;

right: 0;

20% \{

left: 90%;

30% \{

left: 50%;

40% \{

left: 10%;

100% \{

bottom: -100%;

@keyframes policedrivingd \{

0% \{

bottom: 90%;

left: 0px;

right: 0;

20% \{

left: 30%;

30% \{

left: 0%;

40% \{

left: 60%px;

50% \{

left: 80%;

100% \{

bottom: -100%;

@keyframes policedrivinge \{

0% \{

bottom: 90%;

left: 0px;

right: 0;

20% \{

left: 80%;

30% \{

left: 40%;

40% \{

left: 80%;

50% \{

left: 40%;

60% \{

left: 90%;

100% \{

bottom: -100%;

@keyframes policedrivingf \{

0% \{

bottom: 90%;

left: 0px;

right: 0;

20% \{

left: 20%;

30% \{

left: 10%;

40% \{

left: 60%;

50% \{

left: 80%;

60% \{

left: 30%;

100% \{

bottom: -100%;

@keyframes policedrivingg \{

0% \{

bottom: 90%;

left: 10%;

right: 0;

20% \{

left: 20%;

30% \{

left: 30%;

40% \{

left: 40%;

50% \{

left: 50%;

50% \{

left: 60%;

100% \{

bottom: -100%;

@keyframes policedrivingh \{

0% \{

bottom: 90%;

left: 10%;

right: 0;

20% \{

left: 90%;

30% \{

left: 10%;

40% \{

left: 90%;

50% \{

left: 10%;

50% \{

left: 90%;

100% \{

bottom: -100%;

@keyframes policedrivingi \{

0% \{

bottom: 90%;

left: 90%;

right: 0;

10% \{

left: 90%;

15% \{

left: 10%;

20% \{

left: 20%;

25% \{

left: 30%;

30% \{

left: 40%;

100% \{

bottom: -100%;

@keyframes roll \{

0% \{

transform: perspective(400px) rotatex(55deg) skewy(0deg);

10% \{

transform: perspective(400px) rotatex(55deg) skewy(15deg);

20% \{

transform: perspective(400px) rotatex(55deg) skewy(0deg);

30% \{

transform: perspective(400px) rotatex(55deg) skewx(0deg);

40% \{

transform: perspective(400px) rotatex(55deg) skewx(10deg);

50% \{

transform: perspective(400px) rotatex(55deg) skewx(0deg);

70% \{

transform: perspective(400px) rotatex(63deg);

100% \{

transform: perspective(400px) rotatex(55deg);

html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5 手游制作,HTML5游戏制作（九）——炮塔游戏

相关颜色通行html5小游戏,html

相关 html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏

相关 html5游戏判断超出边界,HTML5游戏 - 散步边界问题

相关 html扑克牌游戏源码,html5扑克牌消除小游戏源码

相关 HTML5版的String Avoider小游戏

相关用Html5制作汤姆猫小游戏

相关 HTML5游戏，五子棋

相关 h5小游戏

相关开发 HTML5 小游戏