Webleb - Snippets de Código -

HTML

CSS

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: sans-serif;
 }

body {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #23242a;
 }

.box {
     position: relative;
     width: 380px;
     height: 420px;
     background: #1c1c1c;
     border-radius: 8px;
     overflow: hidden;
 }

.box::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
        height: 420px;
    background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
 }
 .box::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
        height: 420px;
    background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: 3s;
 }
 .borderline{
    position: absolute;
    top: 0;
    inset: 0;
 }
 .borderline::before{
    content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 380px;
        height: 420px;
        background: linear-gradient(0deg, transparent, transparent, orange, orange, orange);
        z-index: 1;
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        animation-delay:-1.5s ;
 }
 .borderline::after{
    content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 380px;
        height: 420px;
        background: linear-gradient(0deg, transparent, transparent, orange, orange, orange);
        z-index: 1;
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        animation-delay:-4.5s ;
 }

@keyframes animate
 {
  0% 
    {transform:rotate(0deg);}
  100% 
    {transform:rotate(360deg);}
 }

.box form{
    position: absolute;
    inset: 4px;
    background: #222;
    padding: 50px 40px;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
 }
 .box form h2{
    color:#fff ;
    font-weight:500 ;
    text-align:center ;
    letter-spacing: 0.1em;
 }
 .box form .inputbox{
    position: relative;
    width: 300px;
    margin-top: 35px;
 }
 .box form .inputbox input{
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: white;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    z-index: 10;
 }
 .box form .inputbox span{
    position: absolute;
   left: 0;
   pointer-events: none;
    padding: 20px 0px 10px;
    color:red;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
 }
 
 .box form .inputbox input:valid ~ span,
 .box form .inputbox input:focus ~ span{
    color:blue;
    font-size: 0.75em;
 transform: translateY(-34px);
 }
.box form .inputbox i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: goldenrod;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s;
    pointer-events: none;
}
 .box form .inputbox input:valid~i,
 .box form .inputbox input:valid~i{
    height: 44px;
 }
 .box form .links{
    display: flex;
    justify-content: space-between;
 }
 .box form .links a{
  margin: 10px 0;
  font-size: 0.75em;
  color: green;
  text-decoration: none;
 }
 .box form .links a:hover{
 
  color: rgb(128, 64, 0);

}
 .box form input[type="submit"]
 {
    border: none;
    outline: none;
    padding: 9px 25px;
    background: yellow;
    cursor: pointer;
    font-size:0.9em ;
    font-weight: 600;
    border-radius: 4px;
    width:100px;
    margin-top: 10px;
 }
 .box form input[type="submit"]:active{
    opacity: 0.8;
 }

Recomendado

Abelha realista 3D

Exemplo de tela de carregamento animada em HTML com CSS

Cartão CSS Glow

HTML

CSS

JS

Recomendado

Abelha realista 3D

Exemplo de tela de carregamento animada em HTML com CSS

Cartão CSS Glow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS