1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-11 16:00:44 +08:00

style(love page): 添加心动呼吸动画并调整图标样式

替换了原有的todo注释,实现了完整的心跳动画效果,同时调整图标尺寸与位置样式
This commit is contained in:
小莫唐尼
2026-09-08 17:51:10 +08:00
parent 3495458a84
commit 06f48adcb7
2 changed files with 31 additions and 3 deletions
+1 -1
View File
@@ -2,4 +2,4 @@
alwaysApply: true
scene: git_message
---
使用中文编写提交信息
必须使用中文编写提交信息
+30 -2
View File
@@ -190,8 +190,8 @@
{{ loveConfig.loveInfo.boyNickname }}
</view>
</view>
<!-- todo:加一个心动呼吸动画 -->
<text class="absolute z-10 -translate-y-4"><wd-icon class-prefix="uhlove-icon" name="aixin" size="90rpx"></wd-icon></text>
<!-- 心动呼吸动画 -->
<text class="heart-beat absolute z-10"><wd-icon class-prefix="uhlove-icon" name="aixin" size="72rpx"></wd-icon></text>
<view class="girl flex flex-col items-center justify-center -translate-x-0.5">
<image class="uh-global-card-glass border-3 box-border border-love h-26 w-26 rounded-full"
:src="checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFill" />
@@ -259,6 +259,34 @@
</template>
<style scoped lang="scss">
/* 心动呼吸动画:两次心跳 + 呼吸回落 */
.heart-beat {
animation: heartBeat 1.2s ease-in-out infinite;
}
@keyframes heartBeat {
0%,
100% {
transform: translateY(-1rem) scale(1);
}
15% {
transform: translateY(-1rem) scale(1.2);
}
30% {
transform: translateY(-1rem) scale(0.95);
}
45% {
transform: translateY(-1rem) scale(1.15);
}
60% {
transform: translateY(-1rem) scale(1);
}
}
.list-item-1 {
animation: listItemAni1 3s ease-in-out infinite;
}