position: absolute;

left: 50%;

margin-left: -300px;

top: 50px;

z-index: 1;

border-radius: 100%;

background-color: #e8f2f6;

background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);

background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);

.mound:after {

content: '';

display: block;

width: 28px;

height: 6px;

position: absolute;

left: 50%;

margin-left: -150px;

top: 68px;

z-index: 2;

background: #dd4040;

border-radius: 100%;

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;

.mound_text {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

.mound_spade {

display: block;

width: 35px;

height: 30px;

position: absolute;

right: 50%;

top: 42%;

margin-right: -250px;

z-index: 0;

-webkit-transform: rotate(35deg);

transform: rotate(35deg);

background: #dd4040;

.mound_spade:before, .mound_spade:after {

content: '';

display: block;

position: absolute;

.mound_spade:before {

width: 40%;

height: 30px;

bottom: 98%;

left: 50%;

margin-left: -20%;

background: #dd4040;

.mound_spade:after {

width: 100%;

height: 30px;

top: -55px;

left: 0%;

box-sizing: border-box;

border: 10px solid #dd4040;

border-radius: 4px 4px 20px 20px;

</style>

</head>

<body translate="no">

<div class="content">

<canvas class="snow" id="snow" width="1440" height="706"></canvas>

<div class="main-text">

<h1>天啊。

那页失踪了。</h1>

<div class="main-text-a"><a href="http://www.eceshu.com/">&lt; 返回首页</a></div>

</div>

<div class="ground">

<div class="mound">

<div class="mound_text">404 </div>

<div class="mound_spade"></div>

</div>

</div>

</div>

<script>

(function() {

function ready(fn) {

if (document.readyState != 'loading'){

fn();

} else {

document.addEventListener('DOMContentLoaded', fn);

}

}

function makeSnow(el) {

var ctx = el.getContext('2d');

var width = 0;

var height = 0;

var particles = [];

var Particle = function() {

this.x = this.y = this.dx = this.dy = 0;

this.reset();

}

Particle.prototype.reset = function() {

this.y = Math.random() * height;

this.x = Math.random() * width;

this.dx = (Math.random() * 1) - 0.5;

this.dy = (Math.random() * 0.5) + 0.5;

}

function createParticles(count) {

if (count != particles.length) {

particles = [];

for (var i = 0; i < count; i++) {

particles.push(new Particle());

}

}

}

function onResize() {

width = window.innerWidth;

height = window.innerHeight;

el.width = width;

el.height = height;

createParticles((width * height) / 10000);

}

function updateParticles() {

ctx.clearRect(0, 0, width, height);

ctx.fillStyle = '#f6f9fa';

particles.forEach(function(particle) {

particle.y += particle.dy;

particle.x += particle.dx;

if (particle.y > height) {

particle.y = 0;

}

if (particle.x > width) {

particle.reset();

particle.y = 0;

}

ctx.beginPath();

ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);

ctx.fill();

});

window.requestAnimationFrame(updateParticles);

}

onResize();

updateParticles();

}

ready(function() {

var canvas = document.getElementById('snow');

makeSnow(canvas);

});

})();

</script>

</body></html>