本人是个菜狗啥也不会╮(╯﹏╰)╭最近学了点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所以没毛病现在已换国内字库
看标题就知道还会有续集的........
转载《404 NOT FOUND （1）》请注明转载至https://blog.miku.ink/archives/9.html
@(汗)这博主简直。。。
咋的不服？