mfx/love-key-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

进出动画效果

Browse Source
This commit is contained in:
没复习
2026-02-27 16:03:45 +08:00
parent 8478c5bd7f
commit d17e8a48eb
5 changed files with 82 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/PageHome.vue
View File

@@ -6,16 +6,16 @@
<div class="hero">
<div class="hero-phones">
<div class="hero-content">
<h1 class="hero-title">
<h1 class="hero-title anim-item">
Not just a tool but<br />
giving meaning to every click
</h1>
<div class="hero-buttons">
<div class="hero-buttons anim-item">
<a href="#"><img src="/src/assets/images/android.png" class="btn-img" /></a>
<a href="#"><img src="/src/assets/images/appStore.png" class="btn-img" /></a>
</div>
</div>
<img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
<img src="/src/assets/images/bg-top-phone.png" class="phone-main anim-item" />
</div>
<div class="deco deco-coin1">🎁</div>
<div class="deco deco-coin2">🏆</div>
@@ -131,14 +131,14 @@
line-height: 1.3;
color: #1a1a1a;
margin-bottom: clamp(16px, 2vh, 40px);
animation: fadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
animation: none;
}
.hero-buttons {
display: flex;
gap: clamp(10px, 3vw, 35px);
justify-content: center;
animation: fadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
animation: none;
}
.btn-img {
@@ -196,7 +196,7 @@
height: clamp(330px, 58vh, 780px);
width: auto;
display: block;
animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
animation: none;
}
@keyframes fadeIn {