前端杂谈 · Web

拟物化404页面

•̀.̫•́✧ · 3月6日 · 2020年 · · 本文2743字 · 阅读7分钟121

前言

前端效果和文章封面图片一样。设计方面利用视差滚动效果,可以很好的模拟真实事物的质感、细节、光感等等;监听鼠标移动轨迹,从而实现人机交互的404页面,模拟丰富的人性化的交互方式,用户体验会更好一些。

源码

<!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" /> 
 </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://www.zsxcool.com/">返回首页</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> 
 </body>
</html>
0 条回应