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.
100 lines
2.3 KiB
100 lines
2.3 KiB
/* 页面整体布局 */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: #93d2f3;
|
|
}
|
|
|
|
/* 图片容器，使用相对定位 */
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 背景图片 */
|
|
.background-image {
|
|
width: 597.3rpx;
|
|
height: 320rpx;
|
|
opacity: 0;
|
|
animation: fadeIn 200ms ease-in forwards;
|
|
animation-delay: 400ms;
|
|
}
|
|
|
|
/* 文字样式，竖向排列 */
|
|
.overlay-text {
|
|
white-space: pre; /* 保留文本中的空格 */
|
|
writing-mode: vertical-lr; /* 让文字竖向排列 */
|
|
text-orientation: upright; /* 保持文字正方向 */
|
|
font-size: 137.4rpx; /* 设定文字大小 */
|
|
line-height: 1.5; /* 调整行高，使文字之间有间距 */
|
|
color: white; /* 文字颜色 */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%); /* 让文字垂直水平居中 */
|
|
text-shadow: 3.8rpx 7.6rpx 11.5rpx #1d469d;
|
|
font-weight: bold;
|
|
opacity: 0; /*初始透明读*/
|
|
animation: fadeIn 400ms ease-in forwards;
|
|
}
|
|
|
|
|
|
/* 页面整体布局 */
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh; /* 使容器高度为视口高度 */
|
|
background-color: #93d2f3; /* 背景颜色 */
|
|
}
|
|
|
|
/* 图片容器，使用相对定位 */
|
|
.image-container2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative; /* 为绝对定位的子元素提供相对定位 */
|
|
width: 100%;
|
|
}
|
|
|
|
/* 背景图片 */
|
|
.background-image2 {
|
|
width: 597.3rpx;
|
|
height: 862.6rpx;
|
|
opacity: 0;
|
|
animation: fadeIn 200ms ease-in forwards;
|
|
animation-delay: 600ms;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.image-button {
|
|
position: absolute; /* 使按钮相对于父容器绝对定位 */
|
|
top: 50%; /* 使按钮垂直居中 */
|
|
left: 50%; /* 使按钮水平居中 */
|
|
transform: translate(-50%, -50%); /* 精确居中 */
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.start-button {
|
|
background-color: #4095e5;
|
|
color: white;
|
|
font-size: 76.3rpx;
|
|
border-radius: 40rpx;
|
|
box-shadow: 6rpx 4rpx 6rpx #0f40f5;
|
|
opacity: 0;
|
|
animation: fadeIn 200ms ease-in forwards;
|
|
animation-delay: 600ms;
|
|
}
|
|
|
|
@keyframes fadeIn{
|
|
to{
|
|
opacity: 1; /*最终透明度*/
|
|
}
|
|
} |