摘要：分享一款纯css3+JS实现的漂亮的404页面，无需加载任何图片，纯代码实现雪花渲染，一起看下最终效果图：分享一款纯css3+JS实现的漂亮的404页面实现代码...
分享一款纯css3+JS实现的漂亮的404页面，无需加载任何图片，纯代码实现雪花渲染，一起看下最终效果图：
分享一款纯css3+JS实现的漂亮的404页面
实现代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>404页面</title>
</head>
<body translate="no">
<div class="content">
<canvas class="snow" id="snow" width="1349" height="400"></canvas>
<div class="main-text">
<h1>天啊，那页失踪了</h1>
<div class="main-text-a"><a href="https://www.yzmcms.com">
< 返回首页</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> 版权声明：本内容来源于互联网，版权归原作者所有，如有侵权请联系我们删除。
分享一款纯css3+JS实现的漂亮的404页面，无需加载任何图片，纯代码实现雪花渲染，一起看下最终效果图：