mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
style(love page): 添加心动呼吸动画并调整图标样式
替换了原有的todo注释,实现了完整的心跳动画效果,同时调整图标尺寸与位置样式
This commit is contained in:
@@ -2,4 +2,4 @@
|
|||||||
alwaysApply: true
|
alwaysApply: true
|
||||||
scene: git_message
|
scene: git_message
|
||||||
---
|
---
|
||||||
使用中文编写提交信息
|
必须使用中文编写提交信息
|
||||||
|
|||||||
@@ -190,8 +190,8 @@
|
|||||||
{{ loveConfig.loveInfo.boyNickname }}
|
{{ loveConfig.loveInfo.boyNickname }}
|
||||||
</view>
|
</view>
|
||||||
</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">
|
<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"
|
<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" />
|
:src="checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFill" />
|
||||||
@@ -259,6 +259,34 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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 {
|
.list-item-1 {
|
||||||
animation: listItemAni1 3s ease-in-out infinite;
|
animation: listItemAni1 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user