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.
83 lines
1.6 KiB
83 lines
1.6 KiB
|
|
.background {
|
|
background-image: url("/static/information/sex/pictures/background.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column; /* 纵向排列 */
|
|
align-items: center; /* 水平居中 */
|
|
justify-content: flex-end; /* 使内容向底部对齐 */
|
|
position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
|
|
}
|
|
|
|
.boy_image {
|
|
position: absolute; /* 绝对定位 */
|
|
width: 30%;
|
|
height: 16%;
|
|
bottom: 33%; /* 距离底部 20% 的位置 */
|
|
left: 10%; /* 水平居中 */
|
|
}
|
|
|
|
.girl_image {
|
|
position: absolute; /* 绝对定位 */
|
|
width: 30%;
|
|
height: 16%;
|
|
bottom: 33%; /* 距离底部 20% 的位置 */
|
|
right: 10%; /* 水平居中 */
|
|
}
|
|
|
|
.button {
|
|
position: absolute; /* 绝对定位 */
|
|
width: 90%;
|
|
height: 12%;
|
|
bottom: 2%; /* 距离底部 20% 的位置 */
|
|
left: 50%; /* 水平居中 */
|
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
|
}
|
|
|
|
|
|
.boy_image,
|
|
.girl_image {
|
|
transition: transform 0.3s ease; /* 设置过渡效果 */
|
|
}
|
|
|
|
.boy_image:hover,
|
|
.girl_image:hover {
|
|
transform: scale(1.1); /* 鼠标悬浮时放大 */
|
|
}
|
|
.human{
|
|
height: 30%;
|
|
width: 80%;
|
|
bottom: 55%;
|
|
|
|
|
|
|
|
|
|
}
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slide-in-left {
|
|
animation: slideInLeft 0.5s ease forwards;
|
|
}
|
|
|
|
.slide-in-right {
|
|
animation: slideInRight 0.5s ease forwards;
|
|
}
|