修改样式
This commit is contained in:
13569518003
@@ -1,252 +1,224 @@
|
||||
.page-container {
|
||||
position: relative;
|
||||
/* 欢迎页容器 */
|
||||
.welcome-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #1a1d3a 0%, #2d1b4e 50%, #3d2456 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
/* 星星装饰 */
|
||||
.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 4rpx;
|
||||
height: 4rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
top: 25%;
|
||||
right: 25%;
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
top: 45%;
|
||||
left: 15%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star-4 {
|
||||
top: 60%;
|
||||
right: 20%;
|
||||
width: 5rpx;
|
||||
height: 5rpx;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.star-5 {
|
||||
top: 75%;
|
||||
left: 30%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.star-6 {
|
||||
top: 85%;
|
||||
right: 35%;
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 书本图标 - 单一整体样式 */
|
||||
.book-icon-single {
|
||||
width: 140rpx;
|
||||
height: 110rpx;
|
||||
position: relative;
|
||||
margin-bottom: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.book-page-left,
|
||||
.book-page-right {
|
||||
width: 60rpx;
|
||||
height: 90rpx;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.book-page-left {
|
||||
left: 8rpx;
|
||||
transform: perspective(300rpx) rotateY(20deg);
|
||||
box-shadow: 2rpx 2rpx 12rpx rgba(0, 0, 0, 0.25);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.book-page-right {
|
||||
right: 8rpx;
|
||||
transform: perspective(300rpx) rotateY(-20deg);
|
||||
box-shadow: -2rpx 2rpx 12rpx rgba(0, 0, 0, 0.25);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.book-spine {
|
||||
width: 10rpx;
|
||||
height: 90rpx;
|
||||
background: #e5e5e5;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 2rpx;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 应用标题 */
|
||||
.app-title {
|
||||
font-size: 88rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 24rpx;
|
||||
letter-spacing: 8rpx;
|
||||
text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 应用副标题 */
|
||||
.app-subtitle {
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 进入按钮 - 左下角定位 */
|
||||
.enter-button {
|
||||
width: 240rpx;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(168, 85, 247, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
position: fixed;
|
||||
bottom: 120rpx;
|
||||
left: 32rpx;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-video {
|
||||
.enter-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 遮罩层 - 隐藏不显示 */
|
||||
.mask {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mask-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 64rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.xz_bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 星座包装器 */
|
||||
.constellation-wrapper {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
/* 当有激活星座时，其他星座稍微变暗 */
|
||||
.constellation-wrapper.dimmed {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 星座图片通用样式 */
|
||||
.xz_xiannv,
|
||||
.xz_lion,
|
||||
.xz_juxie,
|
||||
.xz_sheshou,
|
||||
.xz_shuangyu {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
transform-origin: center center;
|
||||
will-change: transform, opacity, filter;
|
||||
/* 去除边框和轮廓 */
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 悬停效果（移动端用active代替） */
|
||||
.xz_xiannv:active:not(.active-center),
|
||||
.xz_lion:active:not(.active-center),
|
||||
.xz_juxie:active:not(.active-center),
|
||||
.xz_sheshou:active:not(.active-center),
|
||||
.xz_shuangyu:active:not(.active-center) {
|
||||
transform: scale(0.95);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/* 仙女座 - 左上角 */
|
||||
.xz_xiannv {
|
||||
opacity: 95%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.constellation-wrapper:nth-child(1) {
|
||||
top: 120rpx;
|
||||
left: 40rpx;
|
||||
}
|
||||
|
||||
/* 狮子座 - 右上角 */
|
||||
.xz_lion {
|
||||
opacity: 95%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.constellation-wrapper:nth-child(2) {
|
||||
top: 120rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
/* 巨蟹座 - 左中部 */
|
||||
.xz_juxie {
|
||||
opacity: 95%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.constellation-wrapper:nth-child(3) {
|
||||
top: 360rpx;
|
||||
left: 60rpx;
|
||||
}
|
||||
|
||||
/* 射手座 - 右中部 */
|
||||
.xz_sheshou {
|
||||
opacity: 95%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.constellation-wrapper:nth-child(4) {
|
||||
top: 360rpx;
|
||||
right: 60rpx;
|
||||
}
|
||||
|
||||
/* 双鱼座 - 底部居中 */
|
||||
.xz_shuangyu {
|
||||
opacity: 85%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.constellation-wrapper:nth-child(5) {
|
||||
bottom: 180rpx;
|
||||
left: 50%;
|
||||
margin-left: -140rpx;
|
||||
}
|
||||
|
||||
/* 激活状态 - 放大并居中 */
|
||||
.active-center {
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
width: 280rpx !important;
|
||||
height: 280rpx !important;
|
||||
margin: 0 !important;
|
||||
opacity: 1 !important;
|
||||
z-index: 100 !important;
|
||||
pointer-events: auto !important;
|
||||
/* 平移放大动画 + 后续脉冲动画 */
|
||||
animation: zoomIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
smoothPulse 2s ease-in-out 0.6s infinite,
|
||||
glow 2s ease-in-out 0.6s infinite;
|
||||
}
|
||||
|
||||
/* 标题文字 */
|
||||
.constellation-title {
|
||||
position: fixed;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(20rpx);
|
||||
font-size: 72rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
|
||||
opacity: 0;
|
||||
z-index: 101;
|
||||
pointer-events: none;
|
||||
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
|
||||
text-shadow: 0 0 20rpx rgba(74, 111, 165, 1),
|
||||
0 0 40rpx rgba(74, 111, 165, 0.8),
|
||||
0 4rpx 8rpx rgba(0, 0, 0, 0.5);
|
||||
letter-spacing: 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title-show {
|
||||
opacity: 1;
|
||||
top: 63%;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* 平滑的脉冲效果 */
|
||||
@keyframes smoothPulse {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) scale(1.8);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.85);
|
||||
}
|
||||
}
|
||||
|
||||
/* 发光动画 */
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
filter: brightness(1.3) drop-shadow(0 0 60rpx rgba(74, 111, 165, 1))
|
||||
drop-shadow(0 0 100rpx rgba(74, 111, 165, 0.6));
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.4) drop-shadow(0 0 80rpx rgba(74, 111, 165, 1))
|
||||
drop-shadow(0 0 120rpx rgba(74, 111, 165, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
/* 星座包装器的过渡效果 */
|
||||
.constellation-wrapper {
|
||||
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* 平移放大入场动画（无旋转） */
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1.8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 星云粒子效果（伪元素） */
|
||||
.active-center::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(74, 111, 165, 0.3) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: nebula 3s ease-in-out infinite;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes nebula {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.enter-button:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.enter-button:active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user