代码笔记 / 网页设计

分享自用404页面

Yolen · 2月29日 · 2020年 · ·

个人可能比较偏向于拟物化的感觉,这个页面也是类似于视差效果

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>这个页面404了哦!</title> 
  <link rel="stylesheet" href="https://picyolen-1251613259.cos.ap-beijing.myqcloud.com/2020/02/29/3b0db3081ed52.css" /> 
  <!-- css可以直接引用或下载自行外链 --> 
 </head> 
 <body> 
  <nav> 
   <div class="menu"> 
    <p class="website_name">YOLEN</p> 
    <div class="menu_links"> 
     <a href="地址" class="link">回到首页</a> 
     <a href="地址" class="link">联系我们</a> 
     <a href="地址" class="link">关于我们</a> 
    </div> 
    <div class="menu_icon"> 
     <span class="icon"></span> 
    </div> 
   </div> 
  </nav> 
  <section class="wrapper"> 
   <div class="container"> 
    <div id="scene" class="scene" data-hover-only="false" style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none;"> 
     <div class="circle" data-depth="1.2" style="transform: translate3d(-102.5px, 88px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: relative; display: block; left: 0px; top: 0px;"></div> 
     <div class="one" data-depth="0.9" style="transform: translate3d(-76.9px, 66px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"> 
      <div class="content"> 
       <span class="piece"></span> 
       <span class="piece"></span> 
       <span class="piece"></span> 
      </div> 
     </div> 
     <div class="two" data-depth="0.60" style="transform: translate3d(-51.2px, 44px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"> 
      <div class="content"> 
       <span class="piece"></span> 
       <span class="piece"></span> 
       <span class="piece"></span> 
      </div> 
     </div> 
     <div class="three" data-depth="0.40" style="transform: translate3d(-34.2px, 29.3px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"> 
      <div class="content"> 
       <span class="piece"></span> 
       <span class="piece"></span> 
       <span class="piece"></span> 
      </div> 
     </div> 
     <p class="p404" data-depth="0.50" style="transform: translate3d(-42.7px, 36.6px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">404</p> 
     <p class="p404" data-depth="0.10" style="transform: translate3d(-8.5px, 7.3px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">404</p> 
    </div> 
    <div class="text"> 
     <article> 
      <p>Uh oh! 看来你迷路了。<br />请点击按钮返回首页!</p> 
      <button><a href="https://yolen.cn">返回首页</a></button> 
     </article> 
    </div> 
   </div> 
  </section> 
  <script src="https://picyolen-1251613259.cos.ap-beijing.myqcloud.com/2020/02/29/abf17b326ab9b.js"></script> 
  <script src="https://picyolen-1251613259.cos.ap-beijing.myqcloud.com/2020/02/29/3c230e10684d7.js"></script> 
  <script src="https://picyolen-1251613259.cos.ap-beijing.myqcloud.com/2020/02/29/065690ff9776c.js"></script> 
  <!-- js代码可以直接引用或下载自行外链 -->  
 </body>
</html>
11 条回应

  1. 风挽青2020-3-2 · 8:54

    都要秀一波404页面吗? https://fengwanqing.xin/404

    • Yolen2020-3-2 · 17:30

      花里胡哨我最强!

  2. 森屿博客2020-3-1 · 21:00

    哈哈哈  我这404最简单   http://www.isenyu.cn/404

    • Yolen2020-3-1 · 21:02

      不错啊,用的svg格式来替代图片

    • Yolen2020-3-1 · 21:03

      不花里胡哨是对不起我这设计思路的 

      • 森屿博客2020-3-1 · 21:04

        话说  你这是啥主题?

        • Yolen2020-3-1 · 21:19

          niRvana 拟物风

  3. fyatto2020-2-29 · 23:09

    论404的实用性,醒目最关键https://www.funix.cn/errorors(os:其实是做不出来)不得不说,好漂亮啊

    • Yolen2020-2-29 · 23:20

      你这个颜色区分很明显,而且很(醒目),很提神

      • fyatto2020-3-1 · 0:13

        克莱因蓝,早期windows蓝屏的颜色,自带恐慌buff(doge)

        • Yolen2020-3-1 · 0:22

          哈哈 那确实 自带恐慌