This post is saved as a draft.
#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
Variation of aform
Variation of aform