* { margin:0; padding:0; } html { position:relative; overflow:hidden !important; } body { font-family:'Quicksand',sans-serif; padding:0; margin:0; } .Page { width:100%; height:100%; min-height:100vh; position:absolute; z-index:0; display:flex; justify-content:center; align-items:center; } .background { width:100%; height:100%; min-height:100vh; background-image:url("https://images.unsplash.com/photo-1563283805-d8bf898cd83d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80"); position:absolute; z-index:-5; display:flex; justify-content:center; align-items:center; } .background2 { width:100%; height:100%; min-height:100vh; background-image:url("https://plus.unsplash.com/premium_photo-1674086970842-a72b3ffd004d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80"); position:absolute; z-index:-4; } @media screen and (max-width:768px) { .background { background-size:cover; } .background2 { background-size:cover; } }@media screen and (max-width:1000px) { .background { background-size:140%; } .background2 { background-size:140%; } }@media screen and (max-width:1500px) { .background { background-size:130%; } .background2 { background-size:130%; } }@media screen and (max-width:2000px) { .background { background-size:120%; } .background2 { background-size:120%; } }.logo_one { margin:auto; margin-top:-100px; width:200px; height:200px; /*background-color:rgba(255,255,255,0.4); border-radius:50%; box-shadow:0px 0px 10px #ffffff; */ } .logo_two { width:180px; height:180px; margin:5px 5px; border-radius:50%; border:2px solid rgba(255,255,255,0.8); box-shadow:0px 0px 12px rgba(255,255,255,0.9); transition:all 1s; /*box-shadow:0px 0px 10px #ffffff; */ } .logo_two:hover { transform:rotate(360deg); box-shadow:0px 0px 50px rgba(255,255,255,1); transition:all 1s; /*box-shadow:0px 0px 10px #ffffff; */ } .name { margin-top:5px; text-align:center; font-size:30px; color:white; font-weight:500; text-shadow:0px 0px 12px white; transition:all 0.5s; } .name:hover { text-shadow:0px 0px 30px white; transition:all 0.5s; } .slogan { margin:auto; width:600px; height:50px; background-color:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.8); text-shadow:0px 0px 12px #ffffff; box-shadow:0px 0px 12px #ffffff; border-radius:30px; display:flex; justify-content:center; align-items:center; transition:all 0.5s; margin-top:30px; } .slogan:hover { background-color:rgba(255,255,255,0.4); box-shadow:0px 0px 25px #ffffff; transition:all 0.5s; } .slogan_two { text-align:center; color:rgba(255,255,255,1); font-size:16px; max-width:500px; } .button { margin-top:15px; margin-right:auto; margin-left:auto; width:500px; height:100px; display:flex; justify-content:center; align-items:center; } .button1 { margin-left:10px; margin-right:10px; height:50px; width:200px; border:1px solid rgba(255,255,255,0.4); border-radius:25px; background-color:rgba(255,255,255,0.1); color:white; font-size:16px; transition:all 0.5s; } .button1:hover { background-color:rgba(255,255,255,0.4); color:#ffffff; box-shadow:0px 0px 12px #ffffff; transition:all 0.5s; }
更新时间:2023-05-09 10:19:24
第一次发,原本已经选用好自己的图片,但是由于自己不会放入在这里,可以自行改一下图片