Form by John-CFO

#212121

1.form {
2  position: relative;
3  display: block;
4  padding: 2.2rem;
5  max-width: 350px;
6  background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, 
7            rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, 
8            rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);
9  border: 2px solid #fff;
10  -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
11  box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
12  overflow: hidden;
13  z-index: +1;
14}
15
16/*------input and submit section-------*/
17
18.input-container {
19  position: relative;
20}
21
22.input-container input, .form button {
23  outline: none;
24  border: 2px solid #ffffff;
25  margin: 8px 0;
26  font-family: monospace;
27}
28
29.input-container input {
30  background-color: #fff;
31  padding: 6px;
32  font-size: 0.875rem;
33  line-height: 1.25rem;
34  width: 250px;
35  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
36}
37
38.input-mail:focus::placeholder {
39  opacity: 0;
40  transition: opacity .9s;
41}
42
43.input-pwd:focus::placeholder {
44  opacity: 0;
45  transition: opacity .9s;
46}
47
48.submit {
49  position: relative;
50  display: block;
51  padding: 8px;
52  background-color: #c0c0c0;
53  color: #ffffff;
54  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
55  font-size: 0.875rem;
56  line-height: 1.25rem;
57  font-weight: 500;
58  width: 100%;
59  text-transform: uppercase;
60  overflow: hidden;
61}
62
63.submit:hover {
64  -webkit-transition: all 0.2s ease-out;
65  -moz-transition: all 0.2s ease-out;
66  transition: all 0.2s ease-out;
67  border-radius: 3.9px;
68  box-shadow: 4px 5px 17px -4px #ffffff;
69  cursor: pointer;
70}
71
72.submit:hover::before {
73  -webkit-animation: sh02 0.5s 0s linear;
74  -moz-animation: sh02 0.5s 0s linear;
75  animation: sh02 .5s 0s linear;
76}
77
78.submit::before {
79  content: '';
80  display: block;
81  width: 0px;
82  height: 85%;
83  position: absolute;
84  top: 50%;
85  left: 0%;
86  opacity: 0;
87  background: #fff;
88  box-shadow: 0 0 50px 30px #fff;
89  -webkit-transform: skewX(-20deg);
90  -moz-transform: skewX(-20deg);
91  -ms-transform: skewX(-20deg);
92  -o-transform: skewX(-20deg);
93  transform: skewX(-20deg);
94}
95
96@keyframes sh02 {
97  from {
98    opacity: 0;
99    left: 0%;
100  }
101
102  50% {
103    opacity: 1;
104  }
105
106  to {
107    opacity: 0;
108    left: 100%;
109  }
110}
111
112/*--------signup section---------*/
113
114.signup-link {
115  color: #c0c0c0;
116  font-size: 0.875rem;
117  line-height: 1.25rem;
118  text-align: center;
119  font-family: monospace;
120}
121
122.signup-link a {
123  color: #fff;
124  text-decoration: none;
125}
126
127.up:hover {
128  text-decoration: underline;
129}
130
131
132/*--------header section-----------*/
133
134.form-title {
135  font-size: 1.25rem;
136  line-height: 1.75rem;
137  font-family: monospace;
138  font-weight: 600;
139  text-align: center;
140  color: #fff;
141  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
142  animation-duration: 1.5s;
143  overflow: hidden;
144  transition: .12s;
145}
146
147.form-title span {
148  animation: flickering 2s linear infinite both;
149}
150
151.title-2 {
152  display: block;
153  margin-top: -0.5rem;
154  font-size: 2.1rem;
155  font-weight: 800;
156  font-family: Arial, Helvetica, sans-serif;
157  text-align: center;
158  -webkit-text-stroke: #fff 0.1rem;
159  letter-spacing: 0.2rem;
160  color: transparent;
161  position: relative;
162  text-shadow: 0px 0px 16px #CECECE;
163}
164
165.title-2 span::before,
166.title-2 span::after {
167  content: '—';
168}
169
170@keyframes flickering {
171  0%,
172  100% {
173    opacity: 1;
174  }
175
176  41.99% {
177    opacity: 1;
178  }
179
180  42% {
181    opacity: 0;
182  }
183
184  43% {
185    opacity: 0;
186  }
187
188  43.01% {
189    opacity: 1;
190  }
191
192  47.99% {
193    opacity: 1;
194  }
195
196  48% {
197    opacity: 0;
198  }
199
200  49% {
201    opacity: 0;
202  }
203
204  49.01% {
205    opacity: 1;
206  }
207}
208
209/*---------shooting stars-----------*/
210
211
212.bg-stars {
213  position: absolute;
214  top: 0;
215  left: 0;
216  width: 100%;
217  height: 100%;
218  z-index: -2;
219  background-size: cover;
220  animation: animateBg 50s linear infinite;
221}
222
223@keyframes animateBg {
224  0%,100% {
225    transform: scale(1);
226  }
227
228  50% {
229    transform: scale(1.2);
230  }
231}
232
233.star {
234  position: absolute;
235  top: 50%;
236  left: 50%;
237  width: 4px;
238  height: 4px;
239  background: #fff;
240  border-radius: 50%;
241  box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
242  animation: animate 3s linear infinite;
243}
244
245.star::before {
246  content: '';
247  position: absolute;
248  top: 50%;
249  transform: translateY(-50%);
250  width: 300px;
251  height: 1px;
252  background: linear-gradient(90deg,#fff,transparent);
253}
254
255@keyframes animate {
256  0% {
257    transform: rotate(315deg) translateX(0);
258    opacity: 1;
259  }
260
261  70% {
262    opacity: 1;
263  }
264
265  100% {
266    transform: rotate(315deg) translateX(-1000px);
267    opacity: 0;
268  }
269}
270
271.star:nth-child(1) {
272  top: 0;
273  right: 0;
274  left: initial;
275  animation-delay: 0s;
276  animation-duration: 1s;
277}
278
279.star:nth-child(2) {
280  top: 0;
281  right: 100px;
282  left: initial;
283  animation-delay: 0.2s;
284  animation-duration: 3s;
285}
286
287.star:nth-child(3) {
288  top: 0;
289  right: 220px;
290  left: initial;
291  animation-delay: 2.75s;
292  animation-duration: 2.75s;
293}
294
295.star:nth-child(4) {
296  top: 0;
297  right: -220px;
298  left: initial;
299  animation-delay: 1.6s;
300  animation-duration: 1.6s;
301}
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321 
322
323
324
325

.form {
  position: relative;
  display: block;
  padding: 2.2rem;
  max-width: 350px;
  background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, 
            rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, 
            rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);
  border: 2px solid #fff;
  -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
  box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
  overflow: hidden;
  z-index: +1;
}

/*------input and submit section-------*/

.input-container {
  position: relative;
}

.input-container input, .form button {
  outline: none;
  border: 2px solid #ffffff;
  margin: 8px 0;
  font-family: monospace;
}

.input-container input {
  background-color: #fff;
  padding: 6px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 250px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-mail:focus::placeholder {
  opacity: 0;
  transition: opacity .9s;
}

.input-pwd:focus::placeholder {
  opacity: 0;
  transition: opacity .9s;
}

.submit {
  position: relative;
  display: block;
  padding: 8px;
  background-color: #c0c0c0;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  width: 100%;
  text-transform: uppercase;
  overflow: hidden;
}

.submit:hover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border-radius: 3.9px;
  box-shadow: 4px 5px 17px -4px #ffffff;
  cursor: pointer;
}

.submit:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 .5s 0s linear;
}

.submit::before {
  content: '';
  display: block;
  width: 0px;
  height: 85%;
  position: absolute;
  top: 50%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

/*--------signup section---------*/

.signup-link {
  color: #c0c0c0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  font-family: monospace;
}

.signup-link a {
  color: #fff;
  text-decoration: none;
}

.up:hover {
  text-decoration: underline;
}


/*--------header section-----------*/

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: monospace;
  font-weight: 600;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  animation-duration: 1.5s;
  overflow: hidden;
  transition: .12s;
}

.form-title span {
  animation: flickering 2s linear infinite both;
}

.title-2 {
  display: block;
  margin-top: -0.5rem;
  font-size: 2.1rem;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  -webkit-text-stroke: #fff 0.1rem;
  letter-spacing: 0.2rem;
  color: transparent;
  position: relative;
  text-shadow: 0px 0px 16px #CECECE;
}

.title-2 span::before,
.title-2 span::after {
  content: '—';
}

@keyframes flickering {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

/*---------shooting stars-----------*/


.bg-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-size: cover;
  animation: animateBg 50s linear infinite;
}

@keyframes animateBg {
  0%,100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);
  animation: animate 3s linear infinite;
}

.star::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg,#fff,transparent);
}

@keyframes animate {
  0% {
    transform: rotate(315deg) translateX(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: rotate(315deg) translateX(-1000px);
    opacity: 0;
  }
}

.star:nth-child(1) {
  top: 0;
  right: 0;
  left: initial;
  animation-delay: 0s;
  animation-duration: 1s;
}

.star:nth-child(2) {
  top: 0;
  right: 100px;
  left: initial;
  animation-delay: 0.2s;
  animation-duration: 3s;
}

.star:nth-child(3) {
  top: 0;
  right: 220px;
  left: initial;
  animation-delay: 2.75s;
  animation-duration: 2.75s;
}

.star:nth-child(4) {
  top: 0;
  right: -220px;
  left: initial;
  animation-delay: 1.6s;
  animation-duration: 1.6s;
}

Toggle prefixes

4.6K views

Copy to Figma

4.6K views

Comments

No variations yet

MIT License

Copyright - 2024 John-CFO (John) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.