xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:详细页给图片添加3D翻转效果

Browse Source
This commit is contained in:
zheng020 2026-05-20 14:47:39 +08:00 committed by zerosaturation
parent c76d779f4e
commit c887d30738
1 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/pages/asset-detail/asset-detail.vue
View File

@ -956,6 +956,7 @@ onUnmounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
perspective: 800px;
} }
.card-wrapper { .card-wrapper {
@ -963,6 +964,41 @@ onUnmounted(() => {
width: 352rpx; width: 352rpx;
height: 520rpx; height: 520rpx;
margin-bottom: 32rpx; margin-bottom: 32rpx;
animation: card-3d-flip 15s ease-in-out infinite;
transform-origin: center center;
}
.card-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 131, 153, 0.7) 30deg, transparent 60deg);
opacity: 0;
animation: card-glint 15s ease-in-out infinite;
pointer-events: none;
border-radius: 48rpx;
mix-blend-mode: overlay;
}
@keyframes card-3d-flip {
0% {
transform: rotateY(0deg);
}
20% {
transform: rotateY(-30deg);
}
50% {
transform: rotateY(30deg);
}
80% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(0deg);
}
} }
.card-wrapper--lenticular { .card-wrapper--lenticular {
@ -977,7 +1013,7 @@ onUnmounted(() => {
width: 78%; width: 78%;
height: 96%; height: 96%;
border-radius: 64rpx; border-radius: 64rpx;
transform: translate(-50%, -50%) rotate(-10deg); transform: translate(-50%, -50%) ;
z-index: 2; z-index: 2;
overflow: hidden; overflow: hidden;
} }
@ -997,7 +1033,7 @@ onUnmounted(() => {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
overflow: hidden; overflow: hidden;
transform: rotate(-10deg); /* transform: rotate(-10deg); */
} }
.card-badge { .card-badge {
@ -1007,7 +1043,7 @@ onUnmounted(() => {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
z-index: 4; z-index: 4;
transform: rotate(-10deg); /* transform: rotate(-10deg); */
} }
.card-frame { .card-frame {
@ -1017,7 +1053,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
transform: rotate(-10deg); /* transform: rotate(-10deg); */
} }