杰克逊太空行走404效果
代码语言:html
所属分类:布局界面
代码描述:杰克逊太空行走404效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } html { background: #23508a; background: radial-gradient(ellipse at center, #23508a 0%, #1b3b62 50%, #1a365b 100%); font-family: arial; min-width: 400px; } body { width: 100%; height: 100vh; margin: 0; background: radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, #73859a 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at center, rgba(115, 133, 154, 0.5) 1%, rgba(114, 132, 152, 0) 2%, rgba(0, 0, 0, 0) 100%); background-size: 250px 250px , 100px 100px , 60px 60px; background-repeat: repeat; } .figure { position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } .error-no { font-size: 200px; font-weight: bold; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #68e3e9; text-shadow: -2px 4px 2px rgba(0, 0, 0, 0.5); } .moon { width: 150px; height: 150px; border-radius: 50%; background: #fff; position: relative; display: inline-block; z-index: 10; overflow: hidden; box-shadow: -20px 0 20px #e9e9e9 inset; border: 1px solid #68e3e9; } .moon:after { content: ''; position: absolute; left: 75px; top: 70%; width: 20px; height: 20px; border-radius: 50%; color: #e9e9e9; background: currentcolor; -webkit-animation: 5s spin linear infinite; animation: 5s spin linear infinite; box-shadow: -30px -50px 0 20px, 50px -30px 0 -8px , 50px -90px 0 2px , 100px -90px 0 0px, 100px -40px 0 25px, 150px -15px 0 0px, 240px 15px 0 4px, 230px -80px 0 2px, 200px -20px 0 16px, 350px 0 0, 320px -50px 0 20px, 400px -30px 0 -8px, 400px -90px 0 2px; } .mj { position: relative; margin: auto; z-index: 30; width: 60px; -webkit-transform: scale(0.6) translatey(70%); transform: scale(0.6) translatey(70%); } .mj .head { width: 30px; height: 35px; background: #feead6; position: relative; border-radius: 0 0 8px 0; -webkit-transform: rotate(20deg); transform: rotate(20deg); left: 10px; top: 5px; z-index: 5; } .mj .head:before { content: ''; background: #000; width: 35px; height: 30px; position: absolute; left: -2px; bottom: 100%; } .mj .head:after { content: ''; height: 3px; width: 60px; background: #000; position: absolute; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); bottom: 100%; } .mj .head .nose { position: absolute; left: 100%; top: 10px; border-width: 8px 0 0 4px; border-style: solid; border-color: transparent #feead6; } .mj .hair { background: #151515; width: 12px; height: 20px; position: relative; left: -2px; border-radius: 0 0 6px 0; } .mj .hair .ponytail { position: absolute; background: #151515; width: 14px; height: 30px; border-radius: 50%; -webkit-transform: rotate(20deg); transform: rotate(20deg); left: -60%; top: 90%; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-animation: ponytail 1s infinite alternate; animation: ponytail 1s infinite alternate; } .mj .hair .ponytail:after { content: ''; background: #151515; width: 9px; height: 14px; position: absolute; left: 10%; -webkit-transform: rotate(21deg); transform: rotate(21deg); top: 70%; border-radius: 10px 0 50%; } .mj .hair .frontpony { position: absolute; width: 8px; height: 12px; border-left: 3px solid; border-bottom: 2px solid; left: 22px; top: 0px; -webkit-transform: skew(35deg, 0) rotate(35deg); transform: skew(35deg, 0) rotate(35deg); border-radius: 0 0 0 43%; color: #151515; } .mj .hair .frontpony:after { content: ''; width: 10px; height: 10px; position: absolute; border-right: 1px solid; border-bottom: 1px solid; left: -4px; top: 13px; -webkit-transform: skew(0deg, -47deg) rotate(-28deg); transform: skew(0deg, -47deg) rotate(-28deg); border-radius: 0 0 7px 0; } .body { width: 35px; background: #feead6; position: relative; } .body:after { content: ''; position: absolute; right: 0; top: 0; border-style: solid; border-width: 5px 8px 15px 0px; border-color: transparent #feead6 transparent transparent; } .body .jacket { background: #000; height: 70px; position: relative; } .body .jacket:before { content: ''; position: absolute; top: 50px; left: -10px; width: 45px; height: 40px; background: #000; border-radius: 0 50px 50px 50px; -webkit-transform: rotate(25deg); transform: rotate(25deg); z-index: 5; -webkit-animation: 1s jacket infinite alternate; animation: 1s jacket infinite alternate; } .body .jacket:after { content: ''; position: ab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0