當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现月球上行走的宇航员网页设计

發(fā)布時間：2025/3/12 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现月球上行走的宇航员网页设计小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

?臨近期末, 你還在為HTML網(wǎng)頁設(shè)計結(jié)課作業(yè),老師的作業(yè)要求感到頭大？HTML網(wǎng)頁作業(yè)無從下手？網(wǎng)頁要求的總數(shù)量太多？沒有合適的模板？等等一系列問題。你想要解決的問題，在專欄👇🏻👇🏻👇🏻👇🏻

HTML5+CSS精彩網(wǎng)頁特效實戰(zhàn)分享

Html+Css+JavaScript期末大作業(yè)網(wǎng)頁模板

?都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的小游戲網(wǎng)頁制作，畫面精明，非常適合初學(xué)者學(xué)習(xí)使用。

網(wǎng)頁動圖顯示：文末獲取源碼

項目組織結(jié)構(gòu)：

主要源碼展示：

index.html

style.css

body {margin: 0;padding: 0;width: 100vw;height: 100vh;background: #080808;overflow: hidden;background-image: radial-gradient(1px 1px at 5% 98%, #ffffff, #fff0), radial-gradient(1px 1px at 18% 79%, #ffffff, #fff0), radial-gradient(2px 1px at 26% 52%, #ffffff, #fff0), radial-gradient(1px 2px at 31% 20%, #e6e6e6, #fff0), radial-gradient(1px 1px at 41% 44%, #e8e8e8, #fff0), radial-gradient(1px 2px at 47% 6%, #ffffff, #fff0), radial-gradient(1px 1px at 50% 71%, #f5f5f5, #fff0), radial-gradient(2px 1px at 65% 50%, #e2e2e2, #fff0), radial-gradient(1px 1px at 54% 26%, #ffffff, #fff0), radial-gradient(2px 2px at 76% 34%, #efefef, #fff0), radial-gradient(1px 1px at 10% 32%, #ececec, #fff0), radial-gradient(1px 2px at 84% 60%, #ffffff, #fff0), radial-gradient(1px 1px at 87% 13%, #eaeaea, #fff0), radial-gradient(1px 1px at 69% 21%, #efefef, #fff0), radial-gradient(1px 2px at 62% 83%, #efefef, #fff0), radial-gradient(2px 1px at 81% 74%, #efefef, #fff0), radial-gradient(1px 1px at 36% 62%, #efefef, #fff0), radial-gradient(1px 1px at 94% 68%, #efefef, #fff0), radial-gradient(2px 1px at 98% 50%, #efefef, #fff0), radial-gradient(1px 1px at 95% 21%, #efefef, #fff0), linear-gradient(45deg, #000 5%, #000313 65%, #111 100%);background-repeat: repeat;background-size: 25% 25%, 33.33% 33.33%, 50% 50%, 20% 20%, 33.33% 33.33%, 25% 18%, 33.33% 19%, 33.33% 21%, 23% 27%, 27.33% 35.33%, 18.33% 32.33%, 28.33% 34.33%, 33.33% 30.33%, 25.33% 29.33%, 29.33% 31.33%, 20.33% 29.33%, 30.33% 27.33%, 22.33% 33.33%, 15.33% 32.33%, 33.33% 22.33%, 100% 100%; }*:before, *:after {content: "";position: absolute; }body::before {width: 15vmax;height: 15vmax;background: radial-gradient(circle at 50% 100%, #000 0 50%, #fff0), radial-gradient(circle at 121% 39%, green 0 18%, #fff0 20%), radial-gradient(ellipse at 111% 26%, green 0 18%, #fff0 20%), radial-gradient(ellipse at 100% 15%, green 0 18%, #fff0 20%), radial-gradient(circle at 38% -15%, #ffffffb3 0 16%, #fff0 20%), radial-gradient(circle at 50% 100%, #000 0 50%, #008eff);border-radius: 100%;left: 10vmax;top: 10vmax;box-shadow: 0 -0.5vmax 1vmax -0.25vmax #9999ff45; }.moon {position: absolute;width: 250vmax;height: 100vmax;z-index: 1;border-radius: 100%;background: radial-gradient( circle at 50% 50%, #fdfdfd 0% 5vmax, #ffffff00 10vmax 100%), #fff;box-shadow: 0 0 10vmax 1vmax #6493a9, 0 0 5vmax 5vmax #adadad80 inset, 0 0 2vmax 1vmax #fdfdfd;left: calc(50% - 125vmax);top: 45vmax; }.moon:before {content: "";background: radial-gradient( circle at 100% 60%, #ffffff00 0% 60%, #dddddd 75% 100%);width: 100%;height: 100%;position: absolute;top: 0%;left: 0%;border-radius: 100%; }.crater {content: "";position: absolute;width: 25vmax;height: 20vmax;border-radius: 100%;transform: rotateX(50deg) rotateY(-10deg) rotateZ(15deg);border: 1px dotted #404040;background: linear-gradient(225deg, #000000, #eaeaea99);box-shadow: 0 0 3vmax 1vmax #585858, 0 0 0.5vmax 0.5vmax #5d5d5d, 2vmax 5vmax 5.5vmax 3.5vmax #484848, 0 0 5vmax 0.5vmax #444444, 1vmax 3.5vmax 1.5vmax 0.5vmax #ababab;left: calc(50% - 25vmax);opacity: 0.35;bottom: calc(50% + 25vmax); }/*** ASTRONAUT ***/.astronaut {width: 20vmax;height: 30vmax;right: -20vmax;position: absolute;top: 30vmax;z-index: 2;background: transparent;animation: walk-left 20s cubic-bezier(0.05, -0.01, 0.61, 0.99) 0s infinite, walk-up 5s cubic-bezier(0.35, 0.14, 1, 1) 1.5s infinite;margin-top: -10%; }@keyframes walk-left {0% {right: -20%;}20% {right: 10%;}45% {right: 40%;}70% {right: 70%;}100% {right: 100%;} }@keyframes walk-up {0%,100% {top: 30vmax;}10%,90% {top: 31vmax;}50% {top: 35vmax;} }.astronaut * {position: absolute; }.backpack {background: linear-gradient( 91deg, #343535 0% 55%, #4b4e50 58% 75%, #6e7071 77% 88%, #c6c6c6 92% 100%);width: 30%;height: 38%;left: 57%;top: 20%;border-radius: 10% 17% 60% 10%;border-top: 0.2vmax solid #4b4e50; }.head {background: #b8b8b8;width: 46%;height: 27%;border-radius: 50%;left: 31%;top: 4%;border-bottom: 1vmax solid #9b9b9b;transform: rotate(-4deg);z-index: 3; }.head:before {width: 75%;height: 69%;border-radius: 50% 50% 0 0;left: 9%;top: 3%;border-top: 0.65vmax solid #c6c6c6;border-right: 0.15vmax solid transparent;border-left: 0.15vmax solid transparent;transform: rotate(9deg); }.head:after {background: radial-gradient( circle at 45% 25%, #2b2b2b 0 57%, #252525 58% 100%);width: 80%;height: 83%;border-radius: 50%;left: 5%;top: 13%;border: 0.25vmax solid #000;box-sizing: border-box; }.helmet {background: radial-gradient(circle at 8% 33%, #343434 0 5%, #fff0 6% 100%), radial-gradient(circle at 94% 42%, #343434 0 5%, #fff0 6% 100%), radial-gradient(circle at 25% 75%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 35% 70%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 45% 67%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 55% 69%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 65% 77%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 75% 87%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 85% 96%, #2b2b2b 0 35%, #fff0 36% 100%), radial-gradient(circle at 96% 49%, #2b2b2b 0 5%, #fff0 6% 100%), radial-gradient(circle at 4% 40%, #2b2b2b 0 5%, #fff0 6% 100%);width: 50%;height: 50%;border-radius: 100%;z-index: 3;left: 15%;top: 22%;transform: rotate(-16deg);color: #343434;color: #5d5d5d;background-color: #343434; }.helmet:before {background: #343434;width: 98%;height: 36%;border-radius: 100%;left: 2%;top: 25%;transform: rotate(5deg); }.helmet:after {background: #5d5d5d;width: 18%;height: 16%;border-radius: 100%;left: 58%;top: 14%;transform: rotate(27deg);box-shadow: -1.15vmax 0.35vmax 0vmax -0.2vmax #7a7a7a, -1.05vmax 0.25vmax 0vmax -0.2vmax #7a7a7a; }.neck {background: radial-gradient( circle at 43.95% 15%, transparent 0 61%, #666b6e 62% 100%);width: 48%;height: 10%;top: 17%;left: 30%;border-radius: 50% 50% 100% 100%;transform: rotate(5deg);z-index: 3; }.neck:before, .neck:after {background: linear-gradient( 177deg, #fff0 0 32%, #9a9a9a 35% 40%, #fff0 50% 100%), #676c6f;width: 80%;height: 100%;left: -44%;border-radius: 75% 35% 75% 100%;transform: rotate(15deg);top: -27%;opacity: 0; }.neck:after {left: 60%;transform: rotateY(180deg) rotateZ(10deg);top: -15%;border-radius: 40% 35% 75% 100%;background: linear-gradient( 179deg, #fff0 0 30%, #9a9a9a 35% 45%, #fff0 47% 100%), #676c6f; }.body {background: radial-gradient( circle at 50% -75%, #c6c6c6 0 80%, #5f5f5f 81% 85%, #c6c6c6 86% 100%);width: 45%;height: 30%;left: 32%;top: 31%;border-radius: 19% 23% 34% 37%;transform: rotate(-1deg);z-index: 2;border-right: 2vmax solid #888d90;box-sizing: border-box;border-bottom: 1vmax solid #888d90; }.body:before {background: radial-gradient(ellipse at 38% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 33% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 28% 65%, #888d90 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 38% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 33% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(ellipse at 28% 30%, #666b6e 0 13%, #fff0 15% 100%), radial-gradient(circle at 74% 30%, #f50000 0 11%, #fff0 12% 100%), radial-gradient(circle at 75% 65%, #4562ff 0 10%, #fff0 12% 100%), radial-gradient(circle at 75% 31%, #790000 0 11%, #fff0 12% 100%), radial-gradient(circle at 76% 66%, #6f0000 0 10%, #fff0 12% 100%), #d7d7d7;width: 65%;height: 41%;border-radius: 20%;top: 15%;left: 19%;transform: rotate(3deg);border-right: 0.25vmax solid #b1b1b1;border-bottom: 0.25vmax solid #adadad;border-left: 0.1vmax solid #b8b8b8;border-top: 0.15vmax solid #b8b8b8;box-sizing: border-box; }/*** ARMS ***/.arm {width: 40%;height: 18%;top: 25%;transform-origin: right center; }.arm.right {z-index: 0;left: -5%;transform: rotate(20deg);top: 27%;animation: arm-right 20s ease-out 0s infinite; }@keyframes arm-right {0% {transform: rotate(5deg);}20% {transform: rotate(-95deg);}45% {transform: rotate(5deg);}70% {transform: rotate(-95deg);}100% {transform: rotate(5deg);} }.arm.left {left: 31%;transform: rotate(-145deg);top: 28%;z-index: 4;animation: arm-left 20s ease-out 0s infinite; }@keyframes arm-left {0% {transform: rotate(-145deg);}20% {transform: rotate(-45deg);}45% {transform: rotate(-145deg);}70% {transform: rotate(-45deg);}100% {transform: rotate(-145deg);} }.arm .top {background: #0000ff70;width: 55%;height: 45%;right: 0;top: 33%;transform-origin: right center;transform: rotate(-13deg);border-radius: 40%;background: linear-gradient(-3deg, #888d90 0 40%, #c6c6c6 43% 100%); }.arm .bot {width: 55%;height: 45%;top: 53%;left: 15%;transform-origin: right center;transform: rotate(25deg);border-radius: 40%;background: radial-gradient(circle at 100% 51%, #888d90 0 7%, #fff0 8% 100%), linear-gradient(-3deg, #888d90 0 40%, #c6c6c6 43% 100%); }.arm>div:before {background: #666b6e;height: 1.75vmax;width: 1vmax;right: 5%;border-radius: 80% 70% 35% 30%;transform: rotate(-15deg);top: -20%; }.arm>div:after {background: #666b6e;height: 1.5vmax;width: 1vmax;top: 40%;right: 1%;transform: rotate(0deg);border-radius: 30% 30% 80% 70%; }.arm.right .top:before {transform: rotate(10deg);right: -2%; }.arm.left .top:before {transform: rotate(-2deg);left: 78%;right: 1%;top: -10%; }.arm.left .top:after {top: 45%;right: -1%;width: 21%; }/*** HANDS ***/.hand {background: #888d90;width: 33%;height: 53%;border-radius: 55%;top: 19%;transform: rotate(22deg);left: 2%; }.hand:before {top: -5% !important;right: -0.25vmax !important;transform: rotate(-5deg) !important; }.hand:after {top: 45% !important;right: -0.3vmax !important;transform: rotate(-5deg) !important; }/*** LEGS ***/.leg {width: 25%;height: 36%;top: 54%;left: 28%;transform-origin: center top; }.leg.right {animation: leg-right 20s ease-out 0s infinite; }@keyframes leg-right {0% {transform: rotate(-45deg);}20% {transform: rotate(10deg);}45% {transform: rotate(-45deg);}70% {transform: rotate(10deg);}100% {transform: rotate(-45deg);} }.leg.left {transform: rotate(-30deg);animation: leg-left 20s ease-out 0s infinite;transform-origin: 70% top;left: 45%;transform: rotate(-25deg);top: 56%;z-index: 2; }@keyframes leg-left {0% {transform: rotate(15deg);}20% {transform: rotate(-30deg);}45% {transform: rotate(15deg);}70% {transform: rotate(-30deg);}100% {transform: rotate(15deg);} }.leg .top, .leg .bot {width: 75%;height: 32%;left: -16%;top: -5%;transform-origin: right center;transform: rotate(-79deg);border-radius: 25% 10% 10% 25%;background: linear-gradient(-3deg, #888d90 0 65%, #c6c6c6 67% 100%); }.leg .bot {top: 25%;transform: rotate(-97deg);left: -28%;height: 31%; }.leg>div:before {background: #666b6e;height: 65%;width: 1vmax;right: -5%;border-radius: 80% 70% 35% 30%;transform: rotate(25deg);top: -6%; }.leg>div:after {background: #666b6e;height: 65%;width: 1vmax;top: 40%;right: 1%;transform: rotate(-10deg);border-radius: 30% 30% 80% 70%; }/*** FEET ***/.foot {background: linear-gradient(45deg, #888d90 0 55%, #c6c6c6 60% 100%);width: 55%;height: 45%;bottom: -10%;transform: rotate(-99deg);border-radius: 25% 55% 30% 30%;left: 20%;border-left: 0.65vmax solid #505050;box-sizing: border-box; }.foot:before {height: 50% !important;left: 78%;top: 22% !important;transform: rotate(13deg) !important; }}

作品來自于網(wǎng)絡(luò)收集、侵權(quán)立刪?

獲取完整源碼：

大家點贊、收藏、關(guān)注、評論啦、查看👇🏻👇🏻👇🏻微信公眾號獲取聯(lián)系👇🏻👇🏻👇🏻

打卡文章更新?69/? 100天

?精彩專欄推薦：

Java畢設(shè)項目精品實戰(zhàn)案例《100套》

HTML5大作業(yè)實戰(zhàn)案例《100套》

web前端網(wǎng)頁實戰(zhàn)《100套》

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现月球上行走的宇航员网页设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ❤️六W字《计算机基础知识》（八）（建议
下一篇：基于javaweb(springboot