Skip to content

Commit 94d7dc9

Browse files
tajulafreentajulafreen
authored
Merge pull request #8 from tajulafreen/form-wave
50Projects-HTML-CSS-JavaScript: Form wave Animation
2 parents 9f4db4f + 68e3e8a commit 94d7dc9

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

‎Source-Code/FormWaveAnimation/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Form Wave Animation</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Pleas Login</h1>
13+
<form>
14+
<li class="form-control">
15+
<input type="text" required>
16+
<label>Email</label>
17+
</li>
18+
<li class="form-control">
19+
<input type="password" required>
20+
<label>Password</label>
21+
</li>
22+
<li><button class="btn">Login</button></li>
23+
</form>
24+
<p>Don't have an account? <a href="#" class="link">Sign up</a></p>
25+
</div>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎Source-Code/FormWaveAnimation/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const labels = document.querySelectorAll('.form-control label');
2+
3+
labels.forEach((label) => {
4+
label.innerHTML = label.innerText
5+
.split('')
6+
.map(
7+
(letter, idx) => `<span style="transition-delay:${idx * 50}ms" >${letter}</span>`,
8+
)
9+
.join('');
10+
});

‎Source-Code/FormWaveAnimation/style.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
background-color: #212121;
8+
font-family: "Segoe UI", sans-serif;
9+
margin: 0;
10+
overflow: hidden;
11+
height: 100vh;
12+
padding: 20px;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
h1 {
19+
color: aliceblue;
20+
text-align: center;
21+
}
22+
23+
label,
24+
p {
25+
color: aliceblue;
26+
}
27+
28+
.btn {
29+
position: relative;
30+
background: linear-gradient(to bottom, #e81cff8d, #40c9ff69);
31+
padding: 15px;
32+
width: 80%;
33+
color: #fff;
34+
border: 1px #fff;
35+
border-radius: 7px;
36+
font-family: "Segoe UI", sans-serif;
37+
font-weight: bold;
38+
font-size: 18px;
39+
animation: button-shimmer 2s infinite;
40+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
41+
}
42+
43+
@keyframes button-shimmer {
44+
0% {
45+
background-position: left top;
46+
}
47+
48+
100% {
49+
background-position: right bottom;
50+
}
51+
}
52+
53+
@keyframes button-particles {
54+
0% {
55+
background-position: left top;
56+
}
57+
58+
100% {
59+
background-position: right bottom;
60+
}
61+
}
62+
63+
.btn:hover {
64+
background: linear-gradient(to bottom, #e81cff, #40c9ff);
65+
animation: button-particles 1s ease-in-out infinite;
66+
transform: translateY(-2px);
67+
}
68+
69+
.btn:active {
70+
transform: scale(0.95);
71+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
72+
}
73+
74+
a {
75+
text-decoration: none;
76+
color: #fff;
77+
}
78+
79+
.container {
80+
background:
81+
linear-gradient(#000, #000) padding-box,
82+
linear-gradient(145deg, transparent 35%, #e81cff, #40c9ff) border-box;
83+
padding: 20px 40px;
84+
border-radius: 3%;
85+
display: flex;
86+
flex-direction: column;
87+
background-size: 200% 100%;
88+
animation: gradient 5s ease infinite;
89+
border: 2px solid transparent;
90+
}
91+
92+
@keyframes gradient {
93+
0% {
94+
background-position: 0% 50%;
95+
}
96+
97+
50% {
98+
background-position: 100% 50%;
99+
}
100+
101+
100% {
102+
background-position: 0% 50%;
103+
}
104+
}
105+
106+
.form-control {
107+
position: relative;
108+
margin: 20px;
109+
width: 80%;
110+
}
111+
112+
.form-control input {
113+
background-color: transparent;
114+
border: 0;
115+
border-bottom: 2px #ffffffd4 solid;
116+
display: block;
117+
width: 100%;
118+
font-size: 18px;
119+
color: #fff;
120+
}
121+
122+
.form-control input:focus,
123+
.form-control input:valid {
124+
outline: 0;
125+
border-bottom-color: #ffffffd4;
126+
}
127+
128+
.form-control label {
129+
position: absolute;
130+
top: 15px;
131+
left: 0;
132+
color: #717171;
133+
}
134+
135+
.form-control label span {
136+
display: inline-block;
137+
font-size: 18px;
138+
min-width: 5px;
139+
transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
140+
}
141+
142+
.form-control input:focus + label span,
143+
.form-control input:valid + label span {
144+
color: #ffffffb7;
145+
transform: translateY(-30px);
146+
}

0 commit comments

Comments
 (0)