前言
前端效果和文章封面图片一样。设计方面利用视差滚动效果，可以很好的模拟真实事物的质感、细节、光感等等；监听鼠标移动轨迹，从而实现人机交互的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>
必须 注册 为本站用户， 登录 后才可以发表评论！