简单的 404 界面

综合1 7,630,949字数 896阅读2分59秒

编写简单的 404 界面，也可以用来做 500 报错界面，还会飘东西，特别好，蛮漂亮的！

复制代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>404</title>
  7.     <style>
  8.         html, body {
  9.             height: 100%;
  10.             min-height: 450px;
  11.             font-size: 32px;
  12.             font-weight: 500;
  13.             color: #5d7399;
  14.             margin: 0;
  15.             padding: 0;
  16.             border: 0;
  17.         }
  19.         .content {
  20.             height: 100%;
  21.             position: relative;
  22.             z-index: 1;
  23.             background-color: #d2e1ec;
  24.             background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%);
  25.             background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
  26.             overflow: hidden;
  27.         }
  29.         .snow {
  30.             position: absolute;
  31.             top: 0;
  32.             left: 0;
  33.             pointer-events: none;
  34.             z-index: 20;
  35.         }
  37.         .main-text {
  38.             padding: 20vh 20px 0 20px;
  39.             text-align: center;
  40.             line-height: 2em;
  41.             font-size: 5vh;
  42.         }
  44.         .main-text h1 {
  45.             font-size: 45px;
  46.             line-height: 48px;
  47.             margin: 0;
  48.             padding: 0;
  49.         }
  51.         .main-text-a {
  52.             height: 32px;
  53.             margin-left: auto;
  54.             margin-right: auto;
  55.             text-align: center;
  56.         }
  58.         .main-text-a a {
  59.             font-size: 16px;
  60.             text-decoration: none;
  61.             color: #0066CC;
  62.         }
  64.         .main-text-a a:hover {
  65.             color: #000;
  66.         }
  68.         .home-link {
  69.             font-size: 0.6em;
  70.             font-weight: 400;
  71.             color: inherit;
  72.             text-decoration: none;
  73.             opacity: 0.6;
  74.             border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
  75.         }
  77.         .home-link:hover {
  78.             opacity: 1;
  79.         }
  81.         .ground {
  82.             height: 160px;
  83.             width: 100%;
  84.             position: absolute;
  85.             bottom: 0;
  86.             left: 0;
  87.             background: #f6f9fa;
  88.             box-shadow: 0 0 10px 10px #f6f9fa;
  89.         }
  91.         .ground:before, .ground:after {
  92.             content: '';
  93.             display: block;
  94.             width: 250px;
  95.             height: 250px;
  96.             position: absolute;
  97.             top: -62.5px;
  98.             z-index: -1;
  99.             background: transparent;
  100.             -webkit-transform: scaleX(0.2) rotate(45deg);
  101.             transform: scaleX(0.2) rotate(45deg);
  102.         }
  104.         .ground:after {
  105.             left: 50%;
  106.             margin-left: -166.66667px;
  107.             box-shadow: -340px 260px 15px #8193b2, -620px 580px 15px #8193b2, -900px 900px 15px #b0bccf, -1155px 1245px 15px #b4bed1, -1515px 1485px 15px #8193b2, -1755px 1845px 15px #8a9bb8, -2050px 2150px 15px #91a1bc, -2425px 2375px 15px #bac4d5, -2695px 2705px 15px #a1aec6, -3020px 2980px 15px #8193b2, -3315px 3285px 15px #94a3be, -3555px 3645px 15px #9aa9c2, -3910px 3890px 15px #b0bccf, -4180px 4220px 15px #bac4d5, -4535px 4465px 15px #a7b4c9, -4840px 4760px 15px #94a3be;
  108.         }
  110.         .ground:before {
  111.             right: 50%;
  112.             margin-right: -166.66667px;
  113.             box-shadow: 325px -275px 15px #b4bed1, 620px -580px 15px #adb9cd, 925px -875px 15px #a1aec6, 1220px -1180px 15px #b7c1d3, 1545px -1455px 15px #7e90b0, 1795px -1805px 15px #b0bccf, 2080px -2120px 15px #b7c1d3, 2395px -2405px 15px #8e9eba, 2730px -2670px 15px #b7c1d3, 2995px -3005px 15px #9dabc4, 3285px -3315px 15px #a1aec6, 3620px -3580px 15px #8193b2, 3880px -3920px 15px #aab6cb, 4225px -4175px 15px #9dabc4, 4510px -4490px 15px #8e9eba, 4785px -4815px 15px #a7b4c9;
  114.         }
  116.         .mound {
  117.             margin-top: -80px;
  118.             font-weight: 800;
  119.             font-size: 180px;
  120.             text-align: center;
  121.             color: #dd4040;
  122.             pointer-events: none;
  123.         }
  125.         .mound:before {
  126.             content: '';
  127.             display: block;
  128.             width: 600px;
  129.             height: 200px;
  130.             position: absolute;
  131.             left: 50%;
  132.             margin-left: -300px;
  133.             top: 50px;
  134.             z-index: 1;
  135.             border-radius: 100%;
  136.             background-color: #e8f2f6;
  137.             background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px);
  138.             background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px);
  139.         }
  141.         .mound:after {
  142.             content: '';
  143.             display: block;
  144.             width: 28px;
  145.             height: 6px;
  146.             position: absolute;
  147.             left: 50%;
  148.             margin-left: -150px;
  149.             top: 68px;
  150.             z-index: 2;
  151.             background: #dd4040;
  152.             border-radius: 100%;
  153.             -webkit-transform: rotate(-15deg);
  154.             transform: rotate(-15deg);
  155.             box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040;
  156.         }
  158.         .mound_text {
  159.             -webkit-transform: rotate(6deg);
  160.             transform: rotate(6deg);
  161.         }
  163.         .mound_spade {
  164.             display: block;
  165.             width: 35px;
  166.             height: 30px;
  167.             position: absolute;
  168.             right: 50%;
  169.             top: 42%;
  170.             margin-right: -250px;
  171.             z-index: 0;
  172.             -webkit-transform: rotate(35deg);
  173.             transform: rotate(35deg);
  174.             background: #dd4040;
  175.         }
  177.         .mound_spade:before, .mound_spade:after {
  178.             content: '';
  179.             display: block;
  180.             position: absolute;
  181.         }
  183.         .mound_spade:before {
  184.             width: 40%;
  185.             height: 30px;
  186.             bottom: 98%;
  187.             left: 50%;
  188.             margin-left: -20%;
  189.             background: #dd4040;
  190.         }
  192.         .mound_spade:after {
  193.             width: 100%;
  194.             height: 30px;
  195.             top: -55px;
  196.             left: 0%;
  197.             box-sizing: border-box;
  198.             border: 10px solid #dd4040;
  199.             border-radius: 4px 4px 20px 20px;
  200.         }
  201.     </style>
  203. </head>
  205. <body translate="no">
  206. <div class="content">
  207.     <canvas class="snow" id="snow" width="1349" height="400"></canvas>
  208.     <div class="main-text">
  209.         <h1>404 天呐！出错了 ~<br><br>您好像去了一个不存在的地方！ (灬ꈍ ꈍ灬)</h1>
  210.         <div class="main-text-a"><a href="#">< 返回 首页</a></div>
  211.     </div>
  212.     <div class="ground">
  213.         <div class="mound">
  214.             <div class="mound_text">404</div>
  215.             <div class="mound_spade"></div>
  216.         </div>
  217.     </div>
  218. </div>
  221. <script>
  222.     (function () {
  223.         function ready(fn) {
  224.             if (document.readyState != 'loading') {
  225.                 fn();
  226.             } else {
  227.                 document.addEventListener('DOMContentLoaded', fn);
  228.             }
  229.         }
  231.         function makeSnow(el) {
  232.             var ctx = el.getContext('2d');
  233.             var width = 0;
  234.             var height = 0;
  235.             var particles = [];
  237.             var Particle = function () {
  238.                 this.x = this.y = this.dx = this.dy = 0;
  239.                 this.reset();
  240.             }
  242.             Particle.prototype.reset = function () {
  243.                 this.y = Math.random() * height;
  244.                 this.x = Math.random() * width;
  245.                 this.dx = (Math.random() * 1) - 0.5;
  246.                 this.dy = (Math.random() * 0.5) + 0.5;
  247.             }
  249.             function createParticles(count) {
  250.                 if (count != particles.length) {
  251.                     particles = [];
  252.                     for (var i = 0; i < count; i++) {
  253.                         particles.push(new Particle());
  254.                     }
  255.                 }
  256.             }
  258.             function onResize() {
  259.                 width = window.innerWidth;
  260.                 height = window.innerHeight;
  261.                 el.width = width;
  262.                 el.height = height;
  264.                 createParticles((width * height) / 10000);
  265.             }
  267.             function updateParticles() {
  268.                 ctx.clearRect(0, 0, width, height);
  269.                 ctx.fillStyle = '#f6f9fa';
  271.                 particles.forEach(function (particle) {
  272.                     particle.y += particle.dy;
  273.                     particle.x += particle.dx;
  275.                     if (particle.y > height) {
  276.                         particle.y = 0;
  277.                     }
  279.                     if (particle.x > width) {
  280.                         particle.reset();
  281.                         particle.y = 0;
  282.                     }
  284.                     ctx.beginPath();
  285.                     ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
  286.                     ctx.fill();
  287.                 });
  289.                 window.requestAnimationFrame(updateParticles);
  290.             }
  292.             onResize();
  293.             updateParticles();
  294.         }
  296.         ready(function () {
  297.             var canvas = document.getElementById('snow');
  298.             makeSnow(canvas);
  299.         });
  300.     })();
  301. </script>
  303. </body>
  304. </html>

 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/772.html 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/772.html

继续阅读
分享一个好看的404html页面
分享一个好看的404html页面 综合

分享一个好看的404html页面

网站新建的时候都会有默认的404页面，但是感觉那个不好看于是就自己找了个并且修改了一下代码<!DOCTYPE html> <html> <head> <met...
6,645,479评论404
移动5元开通12个月爱优腾会员
移动5元开通12个月爱优腾会员 综合

移动5元开通12个月爱优腾会员

15元Plus会员娱乐版(12个月合约期 爱优腾等会员任选12个月 1款plus会员(随心选娱乐版2021)120元话费券112张10元话费券，限本机使用1；每月解锁1张10元话费券1单笔充值50元及...
10,934,351评论2 7
  • 本文由 admin 发表于2024年8月14日 16:41:59
  • 转载请务必保留本文链接：https://bbs.50-0.cn/772.html
  • 404
零基础做出能赚钱的牛逼公众号

加载中...

    • 匿名
      匿名 4
      福建省厦门市 1F
      回复

      好看好看

    匿名

    发表评论

    匿名网友
    确定