<!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> |
| <title>404</title> |
|
|
| <style> |
| html, body { |
| background: #28254C; |
| font-family: 'Ubuntu'; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| .box { |
| width: 350px; |
| height: 100%; |
| max-height: 600px; |
| min-height: 450px; |
| background: #332F63; |
| border-radius: 20px; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| padding: 30px 50px; |
| } |
| .box .box__ghost { |
| padding: 15px 25px 25px; |
| position: absolute; |
| left: 50%; |
| top: 30%; |
| transform: translate(-50%, -30%); |
| } |
| .box .box__ghost .symbol:nth-child(1) { |
| opacity: .2; |
| animation: shine 4s ease-in-out 3s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after { |
| content: ''; |
| width: 12px; |
| height: 4px; |
| background: #fff; |
| position: absolute; |
| border-radius: 5px; |
| bottom: 65px; |
| left: 0; |
| } |
| .box .box__ghost .symbol:nth-child(1):before { |
| transform: rotate(45deg); |
| } |
| .box .box__ghost .symbol:nth-child(1):after { |
| transform: rotate(-45deg); |
| } |
| .box .box__ghost .symbol:nth-child(2) { |
| position: absolute; |
| left: -5px; |
| top: 30px; |
| height: 18px; |
| width: 18px; |
| border: 4px solid; |
| border-radius: 50%; |
| border-color: #fff; |
| opacity: .2; |
| animation: shine 4s ease-in-out 1.3s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(3) { |
| opacity: .2; |
| animation: shine 3s ease-in-out .5s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after { |
| content: ''; |
| width: 12px; |
| height: 4px; |
| background: #fff; |
| position: absolute; |
| border-radius: 5px; |
| top: 5px; |
| left: 40px; |
| } |
| .box .box__ghost .symbol:nth-child(3):before { |
| transform: rotate(90deg); |
| } |
| .box .box__ghost .symbol:nth-child(3):after { |
| transform: rotate(180deg); |
| } |
| .box .box__ghost .symbol:nth-child(4) { |
| opacity: .2; |
| animation: shine 6s ease-in-out 1.6s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after { |
| content: ''; |
| width: 15px; |
| height: 4px; |
| background: #fff; |
| position: absolute; |
| border-radius: 5px; |
| top: 10px; |
| right: 30px; |
| } |
| .box .box__ghost .symbol:nth-child(4):before { |
| transform: rotate(45deg); |
| } |
| .box .box__ghost .symbol:nth-child(4):after { |
| transform: rotate(-45deg); |
| } |
| .box .box__ghost .symbol:nth-child(5) { |
| position: absolute; |
| right: 5px; |
| top: 40px; |
| height: 12px; |
| width: 12px; |
| border: 3px solid; |
| border-radius: 50%; |
| border-color: #fff; |
| opacity: .2; |
| animation: shine 1.7s ease-in-out 7s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(6) { |
| opacity: .2; |
| animation: shine 2s ease-in-out 6s infinite; |
| } |
| .box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after { |
| content: ''; |
| width: 15px; |
| height: 4px; |
| background: #fff; |
| position: absolute; |
| border-radius: 5px; |
| bottom: 65px; |
| right: -5px; |
| } |
| .box .box__ghost .symbol:nth-child(6):before { |
| transform: rotate(90deg); |
| } |
| .box .box__ghost .symbol:nth-child(6):after { |
| transform: rotate(180deg); |
| } |
| .box .box__ghost .box__ghost-container { |
| background: #fff; |
| width: 100px; |
| height: 100px; |
| border-radius: 100px 100px 0 0; |
| position: relative; |
| margin: 0 auto; |
| animation: upndown 3s ease-in-out infinite; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-eyes { |
| position: absolute; |
| left: 50%; |
| top: 45%; |
| height: 12px; |
| width: 70px; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left { |
| width: 12px; |
| height: 12px; |
| background: #332F63; |
| border-radius: 50%; |
| margin: 0 10px; |
| position: absolute; |
| left: 0; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right { |
| width: 12px; |
| height: 12px; |
| background: #332F63; |
| border-radius: 50%; |
| margin: 0 10px; |
| position: absolute; |
| right: 0; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-bottom { |
| display: flex; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-bottom div { |
| flex-grow: 1; |
| position: relative; |
| top: -10px; |
| height: 20px; |
| border-radius: 100%; |
| background-color: #fff; |
| } |
| .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) { |
| top: -12px; |
| margin: 0 -0px; |
| border-top: 15px solid #332F63; |
| background: transparent; |
| } |
| .box .box__ghost .box__ghost-shadow { |
| height: 20px; |
| box-shadow: 0 50px 15px 5px #3B3769; |
| border-radius: 50%; |
| margin: 0 auto; |
| animation: smallnbig 3s ease-in-out infinite; |
| } |
| .box .box__description { |
| position: absolute; |
| bottom: 30px; |
| left: 50%; |
| transform: translateX(-50%); |
| } |
| .box .box__description .box__description-container { |
| color: #fff; |
| text-align: center; |
| width: 200px; |
| font-size: 16px; |
| margin: 0 auto; |
| } |
| .box .box__description .box__description-container .box__description-title { |
| font-size: 24px; |
| letter-spacing: .5px; |
| } |
| .box .box__description .box__description-container .box__description-text { |
| color: #8C8AA7; |
| line-height: 20px; |
| margin-top: 20px; |
| } |
| .box .box__description .box__button { |
| display: block; |
| position: relative; |
| background: #FF5E65; |
| border: 1px solid transparent; |
| border-radius: 50px; |
| height: 50px; |
| text-align: center; |
| text-decoration: none; |
| color: #fff; |
| line-height: 50px; |
| font-size: 18px; |
| padding: 0 70px; |
| white-space: nowrap; |
| margin-top: 25px; |
| transition: background .5s ease; |
| overflow: hidden; |
| } |
| .box .box__description .box__button:before { |
| content: ''; |
| position: absolute; |
| width: 20px; |
| height: 100px; |
| background: #fff; |
| bottom: -25px; |
| left: 0; |
| border: 2px solid #fff; |
| transform: translateX(-50px) rotate(45deg); |
| transition: transform .5s ease; |
| } |
| .box .box__description .box__button:hover { |
| background: transparent; |
| border-color: #fff; |
| } |
| .box .box__description .box__button:hover:before { |
| transform: translateX(250px) rotate(45deg); |
| } |
|
|
| @keyframes upndown { |
| 0% { |
| transform: translateY(5px); |
| } |
| 50% { |
| transform: translateY(15px); |
| } |
| 100% { |
| transform: translateY(5px); |
| } |
| } |
| @keyframes smallnbig { |
| 0% { |
| width: 90px; |
| } |
| 50% { |
| width: 100px; |
| } |
| 100% { |
| width: 90px; |
| } |
| } |
| @keyframes shine { |
| 0% { |
| opacity: .2; |
| } |
| 25% { |
| opacity: .1; |
| } |
| 50% { |
| opacity: .2; |
| } |
| 100% { |
| opacity: .2; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <div class="box__ghost"> |
| <div class="symbol"></div> |
| <div class="symbol"></div> |
| <div class="symbol"></div> |
| <div class="symbol"></div> |
| <div class="symbol"></div> |
| <div class="symbol"></div> |
| |
| <div class="box__ghost-container"> |
| <div class="box__ghost-eyes"> |
| <div class="box__eye-left"></div> |
| <div class="box__eye-right"></div> |
| </div> |
| <div class="box__ghost-bottom"> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| </div> |
| </div> |
| <div class="box__ghost-shadow"></div> |
| </div> |
| |
| <div class="box__description"> |
| <div class="box__description-container"> |
| <div class="box__description-title">阿啦啦</div> |
| <div class="box__description-text">内容被外星人绑架啦~</div> |
| </div> |
| <a href="/" class="box__button">返回首页</a> |
| </div> |
| </div> |
|
|
| <script> |
| var pageX = $(document).width(); |
| var pageY = $(document).height(); |
| var mouseY=0; |
| var mouseX=0; |
|
|
| $(document).mousemove(function( event ) { |
| //verticalAxis |
| mouseY = event.pageY; |
| yAxis = (pageY/2-mouseY)/pageY*300; |
| //horizontalAxis |
| mouseX = event.pageX / -pageX; |
| xAxis = -mouseX * 100 - 100; |
|
|
| $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' }); |
|
|
| //console.log('X: ' + xAxis); |
|
|
| }); |
| </script> |
|
|
|
|
| </body> |
| </html> |