MENU

404 NOT FOUND (1)

August 17, 2017 • 博客建设

404

本人是个菜狗啥也不会╮(╯﹏╰)╭最近学了点html

然后就来现学现卖咯 o(*≧▽≦)ツ┏━┓

还有一点大部分代码是互联网摘取的~~~不服?那你来打我呀ε=ε=ε=(~ ̄▽ ̄)~


代码段:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>哎呀这个页面我好像木有啊</title>
    <style type="text/css">
@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.font.im/s/monoton/v6/y6oxFxU60dYw9khW6q8jGw.woff2) format('woff');
}
body {
    background-color:#444;
}
#text {
    position:absolute;
    width:600px;
    height:120px;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-60px;
    text-align:center;
    text-transform:uppercase;
    -webkit-tranform:translateZ(0);
    -webkit-transition-duration:0.05s;
    -moz-tranform:translateZ(0);
    color:#f3f3f3;
    text-shadow:0 0 1px rgba(0,0,0,.2);
}



/*Neon*/
p {
  text-align: center;
  font-size: 5em;
  margin: 20px 0 20px 0;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}




p:nth-child(1) a {
  font-family: Monoton;
  /*-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;*/
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}



p a {
  color: #ffffff;
}
/*glow for webkit*/


/*
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}


@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

/*glow*/

/*
@keyframes neon1 {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}
*/

/*REEEEEEEEEEESPONSIVE*/
</style>
  </head>
  <body>
    <div id="container">

  <p id="text"><a href="blog.miku.ink">
    404 NOT FOUND
  </a></p>

</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>

最终效果参看本站
ps:字体可能有点问题我在本地字体没问题放到博客上就有问题了so
我犯蠢了调用的谷歌字体昨天一整天都挂着$$r所以没毛病现在已换国内字库
看标题就知道还会有续集的........

Last Modified: November 6, 2017
Leave a Comment

2 Comments
  1. @(汗)这博主简直。。。