76 lines
1.9 KiB
Plaintext
76 lines
1.9 KiB
Plaintext
.move-circle.data-v-7e0708e6 {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
width: 500rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
z-index: 99;
|
|
touch-action: none;
|
|
}
|
|
.click-box.data-v-7e0708e6,
|
|
.click-box-target.data-v-7e0708e6 {
|
|
width: 150rpx;
|
|
height: 137rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 0rpx;
|
|
font-size: 28rpx;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
|
|
-webkit-tap-highlight-color: transparent;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.click-box.data-v-7e0708e6 {
|
|
color: #888d99;
|
|
}
|
|
/* 选中态：背景径向渐变 + 中心缩放动画（从中间放大再回到原样） */
|
|
.click-box-target.data-v-7e0708e6 {
|
|
color: transparent;
|
|
/* 文字使用渐变填充 */
|
|
animation: scalePulse-7e0708e6 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
transform-origin: center center;
|
|
}
|
|
@keyframes scalePulse-7e0708e6 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
/* 先收缩一点点 */
|
|
transform: scale(0.94);
|
|
}
|
|
65% {
|
|
/* 再放大到略超出的感觉 */
|
|
transform: scale(1.08);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
/* 文本渐变（用于返回/确定文字） */
|
|
.grad-text.data-v-7e0708e6 {
|
|
background-image: linear-gradient(90deg, #5b8bb3, #87a1bd);
|
|
background-size: 200% 100%;
|
|
background-position: 0% 50%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: background-position 0.8s linear;
|
|
}
|
|
/* 选中时文字渐变滚动效果 */
|
|
.click-box-target .grad-text.data-v-7e0708e6 {
|
|
background-position: 100% 50%;
|
|
}
|
|
.image-photo.data-v-7e0708e6 {
|
|
width: 25%;
|
|
height: 25%;
|
|
transition: transform 0.18s ease, filter 0.18s ease;
|
|
}
|
|
/* 选中时图片略微放大 */
|
|
.click-box-target .image-photo.data-v-7e0708e6 {
|
|
/* 让图片跟随父元素缩放，不额外放大，保留平滑过渡 */
|
|
transform: none;
|
|
transition: transform 0.18s ease, filter 0.18s ease;
|
|
filter: none;
|
|
}
|