分享一款纯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页面,无需加载任何图片,纯代码实现雪花渲染,一起看下最终效果图: