121 lines
2.7 KiB
Plaintext
121 lines
2.7 KiB
Plaintext
/* components/badge/index.wxss */
|
||
|
||
/* =================================
|
||
1. 舞台层 (保持透视)
|
||
================================= */
|
||
.badge-scene {
|
||
position: relative;
|
||
width: 285rpx;
|
||
height: 285rpx;
|
||
margin: 50rpx auto;
|
||
/* 透视距离：决定旋转时的立体感，1000rpx 比较自然 */
|
||
perspective: 1000rpx;
|
||
}
|
||
|
||
/* =================================
|
||
2. 背景光线层 (不变)
|
||
================================= */
|
||
.badge-bg-rays {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 180%;
|
||
height: 180%;
|
||
z-index: 0;
|
||
border-radius: 50%;
|
||
background: repeating-conic-gradient(
|
||
from 0deg,
|
||
transparent 0deg 20deg,
|
||
rgba(255, 223, 128, 0.4) 20deg 40deg
|
||
);
|
||
filter: blur(30px);
|
||
animation: rotate-rays 20s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* =================================
|
||
3. 3D包裹层 (修改了动画)
|
||
================================= */
|
||
.badge-3d-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 2;
|
||
transform-style: preserve-3d;
|
||
|
||
/* 【修改点】应用纯左右摇摆动画 */
|
||
/* 4s 一个周期，ease-in-out 让两头慢中间快，更有质感 */
|
||
animation: swayLeftRight 4s ease-in-out infinite;
|
||
}
|
||
|
||
/* =================================
|
||
4. 内容层 (不变)
|
||
================================= */
|
||
.badge-content-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #fff;
|
||
}
|
||
|
||
.badge-img-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* 流光层 (不变) */
|
||
.badge-content-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: linear-gradient(
|
||
to bottom right,
|
||
rgba(255, 255, 255, 0) 30%,
|
||
rgba(255, 255, 255, 0.6) 50%,
|
||
rgba(255, 255, 255, 0) 70%
|
||
);
|
||
transform: rotate(30deg);
|
||
animation: shimmer 3s infinite ease-in-out;
|
||
pointer-events: none;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* =================================
|
||
动画定义 (Keyframes)
|
||
================================= */
|
||
|
||
/* 【新动画】纯左右 3D 摇摆 */
|
||
@keyframes swayLeftRight {
|
||
0% {
|
||
/* 向左侧转 20度 */
|
||
transform: rotateY(-20deg);
|
||
}
|
||
50% {
|
||
/* 向右侧转 20度 */
|
||
transform: rotateY(20deg);
|
||
}
|
||
100% {
|
||
/* 回到左侧 */
|
||
transform: rotateY(-20deg);
|
||
}
|
||
}
|
||
|
||
/* 光线背景旋转 (不变) */
|
||
@keyframes rotate-rays {
|
||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||
}
|
||
|
||
/* 流光扫过 (不变) */
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
|
||
100% { transform: translateX(100%) translateY(100%) rotate(30deg); }
|
||
} |