Webleb - Snippet di Codice -

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;
 }

Consigliato

Un codice di toolify001

Blocco esplosione 67

Pagina di accesso

HTML

CSS

JS

Consigliato

Un codice di toolify001

Blocco esplosione 67

Pagina di accesso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS