首页
酷软
系统
游戏
媒体
- 电影
- 剧集
- 动画
- 记录
- 综艺
- MV
- 有声世界
云资源
源码
更多
- 文库
- web
- 站长帮
- 玩电脑
- 玩游戏
- 玩手机
- 涨姿势
- 玩软件
- 云图志
- 看漫画
- 微读书
- PS玩家
- 网文网语
- 硬件数码
- 编程开发
- 神秘之旅
- 福利线报
- 商业资源
- 网赚相关
- 健康加油站
赞助专区
云盘专区
资源阁
缘聚岛
[趣味代码] 404动态页面纯CSS代码版

作者：CC下载站日期：2018-10-10 03:21:14 浏览：1942 分类：站长帮
404动态页面纯CSS代码版
完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>@import url(https://fonts.googleapis.com/css?family=Lato|Russo+One);*,:after,:before{box-sizing:border-box;}body{margin:0;padding:0;}.container{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100vh;}.container-star{background-image:linear-gradient(to bottom,#292256 0,#8446cf 70%,#a871d6 100%);}.container-star:after{position:absolute;top:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(255,255,255,0) 0,rgba(255,255,255,0) 40%,rgba(15,10,38,.2) 100%);content:"";}.star-1{position:absolute;border-radius:50%;background-color:#fff;-webkit-animation:twinkle 5s infinite ease-in-out;animation:twinkle 5s infinite ease-in-out;}.star-1:after{position:absolute;width:100%;height:100%;border-radius:50%;background-color:#fff;content:"";-webkit-transform:rotate(90deg);transform:rotate(90deg);}.star-1:before{position:absolute;top:-20%;left:-50%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);content:"";}.star-1:nth-of-type(1){top:78vh;left:44vw;width:9px;height:3px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(1):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(2){top:94vh;left:67vw;width:6px;height:2px;-webkit-animation-delay:3s;animation-delay:3s;}.star-1:nth-of-type(2):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(3){top:41vh;left:66vw;width:6px;height:2px;-webkit-animation-delay:1s;animation-delay:1s;}.star-1:nth-of-type(3):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(4){top:72vh;left:77vw;width:9px;height:3px;-webkit-animation-delay:3s;animation-delay:3s;}.star-1:nth-of-type(4):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(5){top:14vh;left:68vw;width:9px;height:3px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(5):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(6){top:26vh;left:79vw;width:6px;height:2px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(6):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(7){top:28vh;left:84vw;width:9px;height:3px;-webkit-animation-delay:1s;animation-delay:1s;}.star-1:nth-of-type(7):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(8){top:42vh;left:28vw;width:4px;height:1.33px;-webkit-animation-delay:3s;animation-delay:3s;}.star-1:nth-of-type(8):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(9){top:7vh;left:99vw;width:7px;height:2.33px;-webkit-animation-delay:1s;animation-delay:1s;}.star-1:nth-of-type(9):before{top:-250%;width:14px;height:14px;}.star-1:nth-of-type(10){top:97vh;left:76vw;width:4px;height:1.33px;-webkit-animation-delay:2s;animation-delay:2s;}.star-1:nth-of-type(10):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(11){top:76vh;left:89vw;width:9px;height:3px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(11):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(12){top:16vh;left:92vw;width:8px;height:2.67px;-webkit-animation-delay:1s;animation-delay:1s;}.star-1:nth-of-type(12):before{top:-250%;width:16px;height:16px;}.star-1:nth-of-type(13){top:78vh;left:33vw;width:6px;height:2px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(13):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(14){top:12vh;left:67vw;width:7px;height:2.33px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(14):before{top:-250%;width:14px;height:14px;}.star-1:nth-of-type(15){top:64vh;left:51vw;width:4px;height:1.33px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(15):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(16){top:71vh;left:95vw;width:4px;height:1.33px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(16):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(17){top:56vh;left:31vw;width:7px;height:2.33px;-webkit-animation-delay:2s;animation-delay:2s;}.star-1:nth-of-type(17):before{top:-250%;width:14px;height:14px;}.star-1:nth-of-type(18){top:33vh;left:80vw;width:6px;height:2px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(18):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(19){top:30vh;left:14vw;width:8px;height:2.67px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(19):before{top:-250%;width:16px;height:16px;}.star-1:nth-of-type(20){top:53vh;left:43vw;width:6px;height:2px;-webkit-animation-delay:3s;animation-delay:3s;}.star-1:nth-of-type(20):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(21){top:32vh;left:9vw;width:7px;height:2.33px;-webkit-animation-delay:2s;animation-delay:2s;}.star-1:nth-of-type(21):before{top:-250%;width:14px;height:14px;}.star-1:nth-of-type(22){top:97vh;left:9vw;width:5px;height:1.67px;-webkit-animation-delay:2s;animation-delay:2s;}.star-1:nth-of-type(22):before{top:-250%;width:10px;height:10px;}.star-1:nth-of-type(23){top:62vh;left:6vw;width:5px;height:1.67px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(23):before{top:-250%;width:10px;height:10px;}.star-1:nth-of-type(24){top:57vh;left:13vw;width:9px;height:3px;-webkit-animation-delay:3s;animation-delay:3s;}.star-1:nth-of-type(24):before{top:-250%;width:18px;height:18px;}.star-1:nth-of-type(25){top:52vh;left:60vw;width:4px;height:1.33px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(25):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(26){top:5vh;left:84vw;width:5px;height:1.67px;-webkit-animation-delay:1s;animation-delay:1s;}.star-1:nth-of-type(26):before{top:-250%;width:10px;height:10px;}.star-1:nth-of-type(27){top:26vh;left:23vw;width:8px;height:2.67px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(27):before{top:-250%;width:16px;height:16px;}.star-1:nth-of-type(28){top:34vh;left:3vw;width:4px;height:1.33px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(28):before{top:-250%;width:8px;height:8px;}.star-1:nth-of-type(29){top:40vh;left:58vw;width:6px;height:2px;-webkit-animation-delay:4s;animation-delay:4s;}.star-1:nth-of-type(29):before{top:-250%;width:12px;height:12px;}.star-1:nth-of-type(30){top:17vh;left:55vw;width:5px;height:1.67px;-webkit-animation-delay:5s;animation-delay:5s;}.star-1:nth-of-type(30):before{top:-250%;width:10px;height:10px;}.star-2{position:absolute;border-radius:50%;background-color:#fff;-webkit-animation:twinkle 5s infinite ease-in-out;animation:twinkle 5s infinite ease-in-out;}.star-2:nth-of-type(31){top:70vh;left:96vw;width:2px;height:2px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(31):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(32){top:88vh;left:57vw;width:3px;height:3px;-webkit-animation-delay:4s;animation-delay:4s;}.star-2:nth-of-type(32):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(33){top:59vh;left:48vw;width:3px;height:3px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(33):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(34){top:2vh;left:83vw;width:2px;height:2px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(34):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(35){top:8vh;left:75vw;width:4px;height:4px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(35):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(36){top:78vh;left:8vw;width:3px;height:3px;-webkit-animation-delay:1s;animation-delay:1s;}.star-2:nth-of-type(36):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(37){top:72vh;left:98vw;width:2px;height:2px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(37):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(38){top:34vh;left:41vw;width:3px;height:3px;-webkit-animation-delay:5s;animation-delay:5s;}.star-2:nth-of-type(38):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(39){top:13vh;left:5vw;width:4px;height:4px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(39):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(40){top:5vh;left:86vw;width:2px;height:2px;-webkit-animation-delay:4s;animation-delay:4s;}.star-2:nth-of-type(40):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(41){top:7vh;left:62vw;width:3px;height:3px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(41):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(42){top:36vh;left:44vw;width:2px;height:2px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(42):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(43){top:74vh;left:47vw;width:3px;height:3px;-webkit-animation-delay:1s;animation-delay:1s;}.star-2:nth-of-type(43):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(44){top:72vh;left:86vw;width:2px;height:2px;-webkit-animation-delay:4s;animation-delay:4s;}.star-2:nth-of-type(44):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(45){top:26vh;left:40vw;width:4px;height:4px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(45):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(46){top:41vh;left:39vw;width:3px;height:3px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(46):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(47){top:16vh;left:36vw;width:4px;height:4px;-webkit-animation-delay:4s;animation-delay:4s;}.star-2:nth-of-type(47):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(48){top:96vh;left:37vw;width:4px;height:4px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(48):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(49){top:18vh;left:8vw;width:4px;height:4px;-webkit-animation-delay:1s;animation-delay:1s;}.star-2:nth-of-type(49):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(50){top:56vh;left:31vw;width:4px;height:4px;-webkit-animation-delay:4s;animation-delay:4s;}.star-2:nth-of-type(50):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(51){top:24vh;left:69vw;width:3px;height:3px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(51):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(52){top:52vh;left:17vw;width:3px;height:3px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(52):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(53){top:35vh;left:59vw;width:2px;height:2px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(53):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(54){top:46vh;left:73vw;width:4px;height:4px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(54):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(55){top:38vh;left:35vw;width:4px;height:4px;-webkit-animation-delay:1s;animation-delay:1s;}.star-2:nth-of-type(55):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(56){top:34vh;left:66vw;width:3px;height:3px;-webkit-animation-delay:2s;animation-delay:2s;}.star-2:nth-of-type(56):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(57){top:80vh;left:76vw;width:3px;height:3px;-webkit-animation-delay:5s;animation-delay:5s;}.star-2:nth-of-type(57):before{top:-250%;width:6px;height:6px;}.star-2:nth-of-type(58){top:45vh;left:49vw;width:2px;height:2px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(58):before{top:-250%;width:4px;height:4px;}.star-2:nth-of-type(59){top:8vh;left:4vw;width:4px;height:4px;-webkit-animation-delay:1s;animation-delay:1s;}.star-2:nth-of-type(59):before{top:-250%;width:8px;height:8px;}.star-2:nth-of-type(60){top:71vh;left:93vw;width:2px;height:2px;-webkit-animation-delay:3s;animation-delay:3s;}.star-2:nth-of-type(60):before{top:-250%;width:4px;height:4px;}.container-title{position:absolute;top:50%;left:50%;display:flex;width:600px;height:450px;color:#fff;text-align:center;font-weight:700;line-height:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);justify-content:center;align-items:center;flex-direction:column;}.title>*{display:inline-block;font-size:200px;}.number{padding:0 .2em;text-shadow:20px 20px 20px rgba(0,0,0,.2);font-family:'Russo One',sans-serif;}.subtitle{margin-top:1.5em;text-shadow:4px 4px 4px rgba(0,0,0,.2);font-size:25px;font-family:Lato,sans-serif;}button{z-index:999;margin-top:1.5em;padding:.5em 1em;border:0;border:2px solid #fff;border-radius:5px;background-color:transparent;color:#fff;text-shadow:4px 4px 4px rgba(0,0,0,.2);letter-spacing:1px;font-size:22px;font-family:Lato,sans-serif;cursor:pointer;transition:opacity .2s ease;}button:hover{opacity:.7;}button:focus{outline:0;}.moon{position:relative;z-index:2;width:160px;height:160px;border-radius:50%;background-color:#fff;box-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #fff,0 0 70px #fff,0 0 80px #fff,0 0 100px #f17;-webkit-animation:rotate 5s ease-in-out infinite;animation:rotate 5s ease-in-out infinite;}.moon .face{position:absolute;top:60%;left:47%;}.moon .face .mouth{position:absolute;width:25px;height:25px;border-top-right-radius:50%;border-bottom-right-radius:50%;border-top-left-radius:50%;background-color:#5c3191;box-shadow:inset -4px -4px 4px rgba(0,0,0,.3);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:snore 5s ease-in-out infinite;animation:snore 5s ease-in-out infinite;}.moon .face .eyes{position:absolute;top:-30px;left:-30px;}.moon .face .eyes .eye-left,.moon .face .eyes .eye-right{position:absolute;width:30px;height:15px;border:4px solid #5c3191;border-top:0;border-bottom-right-radius:100px;border-bottom-left-radius:100px;}.moon .face .eyes .eye-left:after,.moon .face .eyes .eye-left:before,.moon .face .eyes .eye-right:after,.moon .face .eyes .eye-right:before{position:absolute;top:-2px;left:-4px;width:4px;height:4px;border-radius:50%;background-color:#5c3191;content:"";}.moon .face .eyes .eye-left:after,.moon .face .eyes .eye-right:after{right:-4px;left:auto;}.moon .face .eyes .eye-right{left:50px;}.container-bird{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-webkit-perspective:2000px;perspective:2000px;}.bird{position:absolute;top:50%;left:50%;z-index:1000;width:50px;height:40px;-webkit-transform:translate3d(-100vw,0,0) rotateY(90deg);transform:translate3d(-100vw,0,0) rotateY(90deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.bird-container{top:0;left:0;width:100%;height:100%;-webkit-transform:translate3d(50px,30px,-300px);transform:translate3d(50px,30px,-300px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.wing{position:absolute;top:0;right:0;bottom:0;left:0;z-index:300;border-radius:3px;-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}.wing-left{background:linear-gradient(to bottom,#a58dc4 0,#7979a8 100%);-webkit-transform:translate3d(0,0,0) rotateX(-30deg);transform:translate3d(0,0,0) rotateX(-30deg);-webkit-animation:wingLeft 1.3s cubic-bezier(.45,0,.5,.95) infinite;animation:wingLeft 1.3s cubic-bezier(.45,0,.5,.95) infinite;}.wing-right{background:linear-gradient(to bottom,#d9d3e2 0,#b8a5d1 100%);-webkit-transform:translate3d(0,0,0) rotateX(-30deg);transform:translate3d(0,0,0) rotateX(-30deg);-webkit-animation:wingRight 1.3s cubic-bezier(.45,0,.5,.95) infinite;animation:wingRight 1.3s cubic-bezier(.45,0,.5,.95) infinite;}.wing-left-top,.wing-right-top{position:absolute;top:-20px;width:100%;border-right:25px solid transparent;border-left:25px solid transparent;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;}.wing-right-top{border-bottom:20px solid #b8a5d1;-webkit-transform:translate3d(0,0,0) rotateX(60deg);transform:translate3d(0,0,0) rotateX(60deg);-webkit-animation:wingRightTop 1.3s cubic-bezier(.45,0,.5,.95) infinite;animation:wingRightTop 1.3s cubic-bezier(.45,0,.5,.95) infinite;}.wing-left-top{border-bottom:20px solid #7979a8;-webkit-transform:translate3d(0,0,0) rotateX(-60deg);transform:translate3d(0,0,0) rotateX(-60deg);-webkit-animation:wingLeftTop 1.3s cubic-bezier(.45,0,.5,.95) infinite;animation:wingLeftTop 1.3s cubic-bezier(.45,0,.5,.95) infinite;}.bird-anim:nth-child(1){-webkit-animation:bird1 30s linear infinite forwards;animation:bird1 30s linear infinite forwards;}.bird-anim:nth-child(2){z-index:-1;-webkit-animation:bird2 30s linear infinite forwards;animation:bird2 30s linear infinite forwards;-webkit-animation-delay:3s;animation-delay:3s;}.bird-anim:nth-child(3){-webkit-animation:bird3 30s linear infinite forwards;animation:bird3 30s linear infinite forwards;-webkit-animation-delay:5s;animation-delay:5s;}.bird-anim:nth-child(4){-webkit-animation:bird4 30s linear infinite forwards;animation:bird4 30s linear infinite forwards;-webkit-animation-delay:7s;animation-delay:7s;}.bird-anim:nth-child(5){-webkit-animation:bird5 30s linear infinite forwards;animation:bird5 30s linear infinite forwards;-webkit-animation-delay:14s;animation-delay:14s;}.bird-anim:nth-child(6){z-index:-1;-webkit-animation:bird6 30s linear infinite forwards;animation:bird6 30s linear infinite forwards;-webkit-animation-delay:10s;animation-delay:10s;}@-webkit-keyframes rotate{0%,100%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg);}50%{-webkit-transform:rotate(0);transform:rotate(0);}}@keyframes rotate{0%,100%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg);}50%{-webkit-transform:rotate(0);transform:rotate(0);}}@-webkit-keyframes snore{0%,100%{-webkit-transform:scale(1) rotate(30deg);transform:scale(1) rotate(30deg);}50%{border-bottom-left-radius:50%;-webkit-transform:scale(.5) rotate(30deg);transform:scale(.5) rotate(30deg);}}@keyframes snore{0%,100%{-webkit-transform:scale(1) rotate(30deg);transform:scale(1) rotate(30deg);}50%{border-bottom-left-radius:50%;-webkit-transform:scale(.5) rotate(30deg);transform:scale(.5) rotate(30deg);}}@-webkit-keyframes twinkle{0%,100%{opacity:.7;}50%{opacity:.3;}}@keyframes twinkle{0%,100%{opacity:.7;}50%{opacity:.3;}}@-webkit-keyframes wingLeft{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(-50deg);transform:translate3d(0,0,0) rotateX(-50deg);}50%{background:linear-gradient(to bottom,#d9d3e2 0,#b8a5d1 100%);-webkit-transform:translate3d(0,-20px,0) rotateX(-130deg);transform:translate3d(0,-20px,0) rotateX(-130deg);}}@keyframes wingLeft{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(-50deg);transform:translate3d(0,0,0) rotateX(-50deg);}50%{background:linear-gradient(to bottom,#d9d3e2 0,#b8a5d1 100%);-webkit-transform:translate3d(0,-20px,0) rotateX(-130deg);transform:translate3d(0,-20px,0) rotateX(-130deg);}}@-webkit-keyframes wingLeftTop{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(-10deg);transform:translate3d(0,0,0) rotateX(-10deg);}50%{border-bottom:20px solid #b8a5d1;-webkit-transform:translate3d(0,0,0) rotateX(-40deg);transform:translate3d(0,0,0) rotateX(-40deg);}}@keyframes wingLeftTop{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(-10deg);transform:translate3d(0,0,0) rotateX(-10deg);}50%{border-bottom:20px solid #b8a5d1;-webkit-transform:translate3d(0,0,0) rotateX(-40deg);transform:translate3d(0,0,0) rotateX(-40deg);}}@-webkit-keyframes wingRight{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(50deg);transform:translate3d(0,0,0) rotateX(50deg);}50%{background:linear-gradient(to bottom,#a58dc4 0,#7979a8 100%);-webkit-transform:translate3d(0,-20px,0) rotateX(130deg);transform:translate3d(0,-20px,0) rotateX(130deg);}}@keyframes wingRight{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(50deg);transform:translate3d(0,0,0) rotateX(50deg);}50%{background:linear-gradient(to bottom,#a58dc4 0,#7979a8 100%);-webkit-transform:translate3d(0,-20px,0) rotateX(130deg);transform:translate3d(0,-20px,0) rotateX(130deg);}}@-webkit-keyframes wingRightTop{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(10deg);transform:translate3d(0,0,0) rotateX(10deg);}50%{border-bottom:20px solid #7979a8;-webkit-transform:translate3d(0,0,0) rotateX(40deg);transform:translate3d(0,0,0) rotateX(40deg);}}@keyframes wingRightTop{0%,100%{-webkit-transform:translate3d(0,0,0) rotateX(10deg);transform:translate3d(0,0,0) rotateX(10deg);}50%{border-bottom:20px solid #7979a8;-webkit-transform:translate3d(0,0,0) rotateX(40deg);transform:translate3d(0,0,0) rotateX(40deg);}}@-webkit-keyframes bird1{0%{-webkit-transform:translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0);transform:translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0);}100%{-webkit-transform:translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0);transform:translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0);}}@keyframes bird1{0%{-webkit-transform:translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0);transform:translate3d(-120vw,-20px,-1000px) rotateY(-40deg) rotateX(0);}100%{-webkit-transform:translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0);transform:translate3d(100vw,-40vh,1000px) rotateY(-40deg) rotateX(0);}}@-webkit-keyframes bird2{0%,15%{-webkit-transform:translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0);transform:translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0);}100%{-webkit-transform:translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0);transform:translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0);}}@keyframes bird2{0%,15%{-webkit-transform:translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0);transform:translate3d(100vw,-300px,-1000px) rotateY(10deg) rotateX(0);}100%{-webkit-transform:translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0);transform:translate3d(-100vw,-20px,-1000px) rotateY(10deg) rotateX(0);}}@-webkit-keyframes bird3{0%{-webkit-transform:translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);transform:translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);}100%{-webkit-transform:translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);transform:translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);}}@keyframes bird3{0%{-webkit-transform:translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);transform:translate3d(100vw,-50vh,100px) rotateY(-5deg) rotateX(-20deg);}100%{-webkit-transform:translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);transform:translate3d(-100vw,-10vh,100px) rotateY(-5deg) rotateX(-20deg);}}@-webkit-keyframes bird4{0%{-webkit-transform:translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);transform:translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);}100%{-webkit-transform:translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);transform:translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);}}@keyframes bird4{0%{-webkit-transform:translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);transform:translate3d(100vw,30vh,200px) rotateY(-5deg) rotateX(10deg);}100%{-webkit-transform:translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);transform:translate3d(-100vw,-30vh,200px) rotateY(-5deg) rotateX(10deg);}}@-webkit-keyframes bird5{0%,5%{-webkit-transform:translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);transform:translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);}100%{-webkit-transform:translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);transform:translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);}}@keyframes bird5{0%,5%{-webkit-transform:translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);transform:translate3d(100vw,30vh,400px) rotateY(-15deg) rotateX(-10deg);}100%{-webkit-transform:translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);transform:translate3d(-100vw,10vh,400px) rotateY(-15deg) rotateX(-10deg);}}@-webkit-keyframes bird6{0%,10%{-webkit-transform:translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);transform:translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);}100%{-webkit-transform:translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);transform:translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);}}@keyframes bird6{0%,10%{-webkit-transform:translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);transform:translate3d(-100vw,20vh,-500px) rotateY(15deg) rotateX(10deg);}100%{-webkit-transform:translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);transform:translate3d(100vw,40vh,-800px) rotateY(5deg) rotateX(10deg);}}@media screen and (max-width:580px){.container-404{width:100%;}.number{font-size:100px;}.subtitle{padding:0 1em;font-size:20px;}.moon{width:100px;height:100px;}.face{-webkit-transform:scale(.7);transform:scale(.7);}}</style>
</head>
<body>
<div class="container container-star">
<div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-1"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div><div class="star-2"></div>
</div>
<div class="container container-bird"><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="bird bird-anim"><div class="bird-container"><div class="wing wing-left"><div class="wing-left-top"></div></div><div class="wing wing-right"><div class="wing-right-top"></div></div></div></div><div class="container-title"><div class="title"><div class="number">4</div><div class="moon"><div class="face"><div class="mouth"></div><div class="eyes"><div class="eye-left"></div><div class="eye-right"></div></div></div></div><div class="number">4</div></div><div class="subtitle">你查找的页面不存在</div><button>返回首页</button></div>
</div>
</body>
</html>