2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update animasi

Browse Source
This commit is contained in:
Evelyn 2025-12-08 06:48:38 +07:00
parent 6e7b29609d
commit e6438f38d2
3 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
login.css
View File

@ -229,6 +229,12 @@ input:focus {
.f2 { top: 65%; right: 12%; animation-delay: .7s; }
.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
.f6 { top: 40%; left: 50%; animation-delay: .5s; }
.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
.f8 { top: 75%; right: 40%; animation-delay: .8s; }
.f9 { top: 50%; left: 80%; animation-delay: 1s; }
.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
@ -241,3 +247,10 @@ input:focus {
50% { transform: translateX(15px); }
100% { transform: translateX(0); }
}
.login-card, .container {
transition: transform .4s ease;
}
.login-card:hover, .container:hover {
transform: scale(1.012);
}

11
login.html
View File

@ -16,6 +16,17 @@
<div class="bg-circle three"></div>
</div>
<img src="images/fruit1.png" class="fruit f1">
<img src="images/fruit2.png" class="fruit f2">
<img src="images/fruit3.png" class="fruit f3">
<img src="images/fruit4.png" class="fruit f4">
<img src="images/fruit5.png" class="fruit f5">
<img src="images/fruit6.png" class="fruit f6">
<img src="images/fruit7.png" class="fruit f7">
<img src="images/fruit8.png" class="fruit f8">
<img src="images/fruit9.png" class="fruit f9">
<img src="images/fruit10.png" class="fruit f10">
<!-- Login Card -->
<div class="login-card">
<div class="icon-wrapper">

8
login.js
View File

@ -85,3 +85,11 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
setInterval(() => {
document.querySelectorAll(".glitter").forEach(g => {
g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
g.style.left = Math.random() * window.innerWidth + "px";
g.style.top = Math.random() * window.innerHeight + "px";
});
}, 900);