|
- <!DOCTYPE html>& Y' @! ^. y8 y+ Z. u# _
- <html lang="en">
0 B- V/ m" P9 c2 C - <head>
& F# C; a/ P: Z - <meta charset="UTF-8">
: k/ G: I2 V |$ d P& }8 } - <title>抱歉!您访问的页面不存在</title>' X7 q6 l1 r6 \9 Q% A
- <meta name="viewport" content="width=device-width, initial-scale=1">
8 ^+ P' l2 ], R% ]9 x - <style type="text/css">
$ f& E7 k/ y8 J$ F - @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
2 l N" o' ], X7 e# S) n7 l3 U1 U
j' Z4 M& _ f) B4 P1 {% g- * {
* A) r, N8 Z1 v1 H- \' {) Q, v - margin: 0;4 E9 L! u! Y A0 ~6 c
- padding: 0;
2 h% p6 ^0 I/ o; R5 ?' C% } - border: 0;/ O X* i% d1 |6 J7 R
- font-size: 100%;
8 U: A9 e8 F, D8 V! G3 i - font: inherit;/ ]3 J# l' p, b+ _
- vertical-align: baseline;5 G8 L/ F4 I% z. z
- box-sizing: border-box; }/ K, \* A; e6 E
- color: inherit;7 _0 ~" K4 f; p" E) ~- b; n+ w
- -webkit-user-select:none;
: g2 B7 C6 w4 p+ i O - -moz-user-select:none;( {6 s; M; V: q% N
- -ms-user-select:none;
) R# w$ p/ Z p* a1 } - user-select:none;9 B. u0 d/ Y4 h: L+ P1 ~7 J
- }
' E4 Y/ C# W1 F6 x2 T2 N1 \ - 0 F! x7 M8 w$ m \8 r" k
- body {
, w7 i! u" m( [5 N0 V - background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);; J1 J0 Q* v- t3 q# n8 [( R
- height: 100vh;
$ T. {1 q( v8 ?7 p$ G& n2 s4 U0 y - }% [; s# T! W# P0 ^
# m6 B& A: z) |1 Z- h1 {1 p5 O& F! h! B/ D
- font-size: 45vw;. z* `1 H- e) l8 p: }$ P
- text-align: center;
$ Y* e% g" h! E7 w+ D - position: fixed;, T4 z5 v0 s( N. e8 Y) n
- width: 100vw;1 M* A$ ^ ~/ _* m3 z F* W
- z-index: 1;
2 C5 z0 x! r$ _- E9 B. d" M - color: #ffffff26;
: e" o P7 k; L! a6 @. P - text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
9 {' F: r4 f& n5 T0 m - top: 50%;, }) S# O9 D, r' ^2 p
- -webkit-transform: translateY(-50%);( n/ e0 B- k" K+ o: d5 v
- transform: translateY(-50%);
2 P/ [* Q3 x3 F - font-family: "Montserrat", monospace;
5 k p$ }) Z' n# u3 p/ u - }
1 V/ A+ h. i7 D2 `' d! }5 \
" ^. ]2 I9 `- F8 H7 F, R- #a{
9 b+ p2 G6 }7 q: b! P( J6 J6 c# g - background: rgba(0, 0, 0, 0);
( Z4 V4 p8 v) X# H+ p3 v+ R( P8 K - width: 70vw;
1 \( l0 h0 b$ _, g - position: relative;# d& E1 \- J: o
- top: 50%;
- D% u( Z9 u+ Q9 R6 L5 O - -webkit-transform: translateY(-50%);& A) S/ P6 k8 v! y( B9 k
- transform: translateY(-50%);
6 q0 G$ q: |3 Q1 f2 d$ Z0 G - margin: 0 auto;7 ^+ z0 W* k+ |. B9 B
- padding: 30px 30px 10px;; |) D' V" S7 ]5 c1 d3 M/ }
- box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);1 _2 l l3 f8 o" L% O8 f# ~
- z-index: 3;
. O; w5 G; a, y' q! I% B0 d - }
" q2 @% s$ m5 v( h9 c3 x. r
! x4 `2 q# R; B0 q- P {/ r: H( r. m1 w& h" J7 d
- font-family: "Share Tech Mono", monospace;
) e8 q, a: }! W/ N- T# x3 D) \ - color: #f5f5f5;
5 d% x; v; |' ^) L1 d; B" o$ v( I - margin: 0 0 20px;# i+ t9 W. ~" P1 r6 S
- font-size: 17px;
5 b4 z# _5 k! R7 C) p) V5 z - line-height: 1.2;7 ]: Q( s b$ t" b, R X3 ^
- }
$ c5 Y9 N/ X8 w8 z
! D( Y6 u# C- V+ G- span {
' Q+ E1 L, W4 J7 f5 c - color: #f0c674;/ [2 H% T( A# k+ Q5 f7 r
- }. I/ E" F1 W' Z) m' C
- 7 ^& H( A! s+ P
- i {
1 Y' U: w9 ]4 b9 c) ~8 e - color: #8abeb7;
# s, A& O0 o! d+ Z3 h - }
' \ M' B; F, u! _" Y) x
& ?, F; ]/ s: G# m4 a) h- div a {) D2 l) L' Y# I$ C
- text-decoration: none;
8 U6 n u* o$ n% ^0 k9 p+ r& J - } s7 S9 M9 }! J# E8 R
- 5 G6 j" k- g5 A+ g$ Y4 `: _
- b {
$ l/ d( _: K0 G/ ^ - color: #81a2be;% k. d% c. P8 R& m1 U4 m
- }6 ]- Y0 n" n* X4 D' J
' o4 f s% R N2 M- a.avatar {
4 w+ `% I. y( F& p - position: fixed;; J* W: f, v! o0 S
- bottom: 15px;8 ^+ a0 P: z( a- A
- right: -100px;
$ Q6 n' b7 b/ H: C! x" y& G ]( | - -webkit-animation: slide 0.5s 4.5s forwards;
$ d4 ?" u7 P" |- T/ r4 S - animation: slide 0.5s 4.5s forwards; h; Q# V8 q O- e% V
- display: block;; o0 f( ?. {/ w- `1 P3 P8 P% O
- z-index: 43 u0 N& x! l8 O2 ~
- }
& G: }: v8 d0 r: K3 ]9 b0 a
* j9 ^) @; E5 ?) J& k3 x-
) q* ~- I& T9 Y% o - ; _1 x. \9 M9 c5 V0 ^4 C
- @-webkit-keyframes slide {/ g- {, z; e5 U0 M4 F
- from {% p: i) b3 M8 d+ x
- right: -100px;: [' T( h) Q# ~& u
- -webkit-transform: rotate(360deg);
/ g$ a5 w2 X6 i) G - transform: rotate(360deg);
0 y5 K6 C7 C& z. q, Y - opacity: 0;' ~ X3 o% f K$ f, Y
- }
+ R7 ?1 z+ v1 ~+ A4 w2 r - + s8 P3 j& T Z; D2 R
- to {
- _+ E: w9 O5 U - right: 15px;
5 D- y0 v4 x2 w' b - -webkit-transform: rotate(0deg); h6 \6 ]% ~2 f
- transform: rotate(0deg);
' A8 _, T( l. C7 O# N7 l - opacity: 1;
/ J# p" A" r. b - }
: J! A. F* V _ b - }
4 e) [" X) \2 r5 U1 Z' H7 S7 M2 [% |
* B) x6 ~* S/ C* t. f$ Y9 Z- @keyframes slide {8 ?8 w( \: G. _$ v
- from {
|9 w, u2 z5 Y' K - right: -100px;2 o* l" Y5 a K' H( p1 @* \
- -webkit-transform: rotate(360deg);
$ \7 G0 [- s' J' R2 C' J% O - transform: rotate(360deg);& A- V5 X4 j R: h
- opacity: 0;
9 O8 }2 z: M3 N9 I" Z+ O - }" i% M4 v" B/ e7 R
+ d! M; `8 O4 U0 V- to {
+ k5 W: ]9 A. r0 R - right: 15px;
( S$ U; p J% N7 Y3 j - -webkit-transform: rotate(0deg);
9 D& p& a0 B! ^% K3 p0 l6 Z - transform: rotate(0deg);3 k/ m2 t; ]; f- U$ I) ?) J
- opacity: 1;' f* f) K5 v; Q% v
- }* a Q0 d8 j1 B: R6 v* C' x7 y0 S
- }
& T6 F- K9 n5 |7 A0 o# o' p2 _ -
: G! \4 M9 K4 Z) d5 G' K - @media (max-width: 576px) {
/ r9 C! T+ ^9 `5 j# r - div {
: R+ _- e. H0 c" O5 U - width: 90vw;
9 i! L6 h4 F! E7 r1 L% J - }
/ d$ a$ e9 T. ?; o7 S - }
b4 f9 `& f f$ y - </style>
, Z# ?4 T1 R5 l( H, t* \1 {3 u! A9 g - ' C; A. s* M- z4 H7 c
- </head>' i* x1 P3 n$ u$ ^
- <body>6 Q- y" t1 F+ Q. i* C& n8 d
- <audio id="vd" src="http://music.163.com/song/media/outer/url?id=522041157.mp3" autoplay="autoplay">8 {8 ~ V0 y+ J3 u1 w" s
- </audio>2 }2 u4 K* v) \ a- r
- <h1>404</h1>
4 [1 C9 ]+ e# _- [1 }& g! P - <div id="a">: ~" w; Z; [7 y# \0 U3 @1 L
- <p>> <span>错误代码</span>: "<i>404 Not Found</i>"</p>
2 W1 @, f! j5 p* Y3 `7 @9 D - <p>> <span>错误描述</span>: "<i>你访问的页面不存在</i>"</p>
) z( T, e2 F* J - <p>> <span>错误可能由以下原因引起</span>: [<b>HTTP 404 错误意味着链接指向的网页不存在,即原始网页的URL失效,这种情况经常会发生,很难避免,比如说:网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等,导致原来的URL地址无法访问;当Web服务器接到类似请求时,会返回一个404状态码,告诉浏览器要请求的资源并不存在。</b>...]</p>. A# s, n9 F4 ?+ l
- <p>> <span>404 Not Found 的由来</span> : [<b>据说在第三次科技革命之前,互联网的形态就是一个大型的中央数据库,这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的,如果在数据库中没有找到请求者所需要的文件,或者由于请求者写错了文件编号,用户就会得到一个返回信息:room 404 : file not found。后来互联网兴起后,人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的。</b>]</p>8 S# Z& p, ^3 s4 L
- <p>> <span>很抱歉给您带来不便 :-)</span></p>) k- c; u/ L; U* }' r
- <p>><span>318SEC提供</span><i>318SEC</i></p>
' A6 D: J& u& [* `7 {* e - </div>
: i( v, P1 ]6 Q1 a4 a
. N8 k* U6 y% R( C0 a# P* C- <script type="text/javascript">* ]( S0 `) h f" o f
- var str = document.getElementsByTagName('div')[0].innerHTML.toString();7 J3 M8 c$ U1 G- P2 f) P6 }- Y
- var i = 0;, k2 N. I+ j2 {
- document.getElementsByTagName('div')[0].innerHTML = "";% m- {. r! q. _! H: L& P7 j% g
4 s2 ?# B1 `' E) r6 {4 L5 F8 x- setTimeout(function() {- L8 D9 Y% Y$ [
- var se = setInterval(function() {
$ B, R% a+ p" e# I* b: B0 N7 P - i++;9 v0 X5 u7 {7 ?$ m" @( w2 G' [
- document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "_";2 m/ _+ P/ P% u5 N; v: h! C
- if (i == str.length) {
* n% ]. p( Z1 ]2 m7 e+ Z - clearInterval(se);
4 A' Q9 A" J: P - document.getElementsByTagName('div')[0].innerHTML = str;
( B) s% q, q& Q( U - }% c h; O( o& E8 O# d+ Y" w
- }, 60);- ^ i0 ^; k9 C8 E/ N/ x; t+ o. o
- }, 0);' y6 @8 p5 v0 L: ~$ O' u2 w2 w
- function toggleSound() { S+ U! ^$ x! B6 b( X, U P
- var music = document.getElementById("vd");//获取ID
. [+ [* Y) w+ E6 q - console.log(music);7 [/ o9 H+ Q F+ b$ z4 k
- console.log(music.paused);
# B7 p* N3 d1 _( Q - if (music.paused) { //判读是否播放
P# r& Z5 t' ~3 | - music.paused=false;; W0 @2 G$ _/ }& x3 }; s1 B; j
- music.play(); //没有就播放
+ y* A8 A; r; g3 O& y k - } 4 M ^. x0 b! X" o: c9 w3 }% [3 k6 x3 D
- }5 J( \* ]$ v0 e! X5 R9 d5 S5 k
- : J# H U1 R* P% O4 l! m1 U# s
- setInterval("toggleSound()",1);' a+ O4 y0 W/ A8 I, m
- </script>4 v" v+ S7 ^; W5 W
- / K$ k' F0 g5 Q; `1 n$ S0 o) U: l: m
- </body>6 l J8 q) Z. L/ w3 S
- </html>
复制代码 |
|