html5 小游戏 404页面,HTML5 404页面 - 黑洞

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:300,900);

html,

body {

margin: 0;

overflow: hidden;

background: #0a0a0a;

}

canvas {

-webkit-animation: rotate 30s linear infinite;

animation: rotate 30s linear infinite;

}

.content {

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 50vw;

height: 50vh;

text-align: center;

}

h1,

h2 {

margin: 0;

color: #fff;

text-shadow: 0 0 100px #00f, 0 3px 0 rgba(50, 0, 100, 0.8);

-webkit-filter: url(#drop-shadow);

filter: url(#drop-shadow);

font-family: Roboto;

font-weight: 300;

}

h1 {

font-size: 30vh;

}

h2 {

font-size: 7vh;

}

.black-hole {

font-weight: 900;

text-shadow: 0 0 50px #8e57ff;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

position: relative;

-webkit-animation: pulse 1s ease infinite, pulse2 1s ease infinite;

animation: pulse 1s ease infinite, pulse2 1s ease infinite;

}

.black-hole:after {

content: "0";

position: absolute;

top: 6%;

left: 5%;

color: #f9f;

font-size: 90%;

-webkit-filter: blur(5px);

filter: blur(5px);

}

.black-hole:before {

content: "0";

position: absolute;

top: 0;

left: 0;

color: #f0f;

-webkit-filter: blur(5px);

filter: blur(5px);

}

@-webkit-keyframes pulse {

0% {

-webkit-transform: scale(0.95) rotateZ(-3deg) translateZ(0);

transform: scale(0.95) rotateZ(-3deg) translateZ(0);

}

50% {

-webkit-transform: scale(1.05) rotateZ(3deg) translateZ(0);

transform: scale(1.05) rotateZ(3deg) translateZ(0);

}

100% {

-webkit-transform: scale(0.95) rotateZ(-3deg) translateZ(0);

transform: scale(0.95) rotateZ(-3deg) translateZ(0);

}

}

@keyframes pulse {

0% {

-webkit-transform: scale(0.95) rotateZ(-3deg) translateZ(0);

transform: scale(0.95) rotateZ(-3deg) translateZ(0);

}

50% {

-webkit-transform: scale(1.05) rotateZ(3deg) translateZ(0);

transform: scale(1.05) rotateZ(3deg) translateZ(0);

}

100% {

-webkit-transform: scale(0.95) rotateZ(-3deg) translateZ(0);

transform: scale(0.95) rotateZ(-3deg) translateZ(0);

}

}

@-webkit-keyframes pulse2 {

0% {

text-shadow: 0 0 50px #8e57ff;

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

50% {

text-shadow: 0 0 60px #8000ff;

-webkit-filter: hue-rotate(30deg);

filter: hue-rotate(30deg);

}

100% {

text-shadow: 0 0 50px #8e57ff;

-webkit-filter: hue-rotate(-30deg);

filter: hue-rotate(-30deg);

}

}

@keyframes pulse2 {

0% {

text-shadow: 0 0 50px #8e57ff;

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

50% {

text-shadow: 0 0 60px #8000ff;

-webkit-filter: hue-rotate(30deg);

filter: hue-rotate(30deg);

}

100% {

text-shadow: 0 0 50px #8e57ff;

-webkit-filter: hue-rotate(-30deg);

filter: hue-rotate(-30deg);

}

}

@-webkit-keyframes rotate {

to {

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

}

}

@keyframes rotate {

to {

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

}

}