* {
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
第一次发,原本已经选用好自己的图片,但是由于自己不会放入在这里,可以自行改一下图片