MENU

404 NOT FOUND (2)

January 20, 2019 • 博客建设,福利,学习

摸鱼许久终于更新

这次是拖了很久的第二个404页面|´・ω・)ノ

2019年第一次更新希望以后不再摸鱼了

上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>404</title>
    <style type="text/css">
    @font-face {
        font-family: 'display_free_tfbregular';
        src: url('display_free_tfb-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }
body, h1, h2, p {
  border:0; margin:0; padding:0;
}
h1{
   font-family: 'display_free_tfbregular', Arial, serif; font-weight: 400;
}
#text {
    position:absolute;
    width:600px;
    height:100px;
    left:50%;
    top:40%;
    margin-left:-300px;
    margin-top:-60px;
    text-transform:uppercase;
    -webkit-tranform:translateZ(0);
    -webkit-transition-duration:0.05s;
    -moz-tranform:translateZ(0);
  display:absolute;
    text-align:center;
    padding:10px 0;
    font-size: 4.5em;
    color:#aaa;
    text-shadow:3 5px 0 rgba(0,0,0,0.1);
}
a {
  text-decoration: none;
}
</style>
</head>
<body>
    <div id="text"><a><h1>

    404</h1>NOT FOUND</a></div>

</body>
  <script type="text/javascript">
    var text = document.getElementById('text'),
      body = document.body,
      steps = 7;
  function threedee (e) {
      var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
          y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
          shadow = '',
          color = 190,
          radius = 3,
          i;

      for (i=0; i<steps; i++) {
          tx = Math.round(x / steps * i);
          ty = Math.round(y / steps * i);
          if (tx || ty) {
              color -= 3 * i;
              shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
          }
      }

      shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';

      text.style.textShadow = shadow;
      text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
      text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
  }

  document.addEventListener('mousemove', threedee, false);
  </script>
</html>

这个页面有单独调用字体文件,我还没找好放哪先等等啦

Last Modified: February 19, 2020