You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.1 KiB
59 lines
1.1 KiB
.background {
|
|
background-image: url("/static/information/girl_height/pictures/img.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.human {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90%;
|
|
top:-10%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
}
|
|
|
|
.progress{
|
|
position: absolute;
|
|
width: 77%;
|
|
height: 7%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
opacity: 1;
|
|
top: 2%; /* 根据需要调整位置 */
|
|
}
|
|
|
|
/* Text 延迟显示 */
|
|
.roll {
|
|
position: absolute;
|
|
width: 77%;
|
|
height: 20%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
opacity: 1;
|
|
top: 55%; /* 根据需要调整位置 */
|
|
}
|
|
|
|
/* Button 延迟显示并加缩放特效，放在下方 */
|
|
.button {
|
|
position: absolute;
|
|
height: 13%;
|
|
width: 80%;
|
|
opacity: 1;
|
|
right: 10%; /* 距右边 10% */
|
|
bottom: 2%; /* 距底部 3.5% */
|
|
}
|
|
|
|
.text{
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
width: 100%;
|
|
height: 20%;
|
|
top: 69%;
|
|
color:#ffffff;
|
|
} |