css表单交互

表单交互

.auth-form-fieldset input:hover,.auth-form-fieldset select:hover,.auth-form-fieldset textarea:hover {
    border: 1px solid rgba(47,184,241,.4)
}

.auth-form-fieldset input::-moz-placeholder,.auth-form-fieldset select::-moz-placeholder,.auth-form-fieldset textarea::-moz-placeholder {
    color: #35506b
}

.auth-form-fieldset input::placeholder,.auth-form-fieldset select::placeholder,.auth-form-fieldset textarea::placeholder {
    color: #35506b
}

.auth-form-fieldset input:focus,.auth-form-fieldset select:focus,.auth-form-fieldset textarea:focus {
    -webkit-animation: glow-input-default .8s ease-out infinite alternate;
    animation: glow-input-default .8s ease-out infinite alternate;
    outline: none;
    border: 1px solid rgba(47,184,241,.4)
}

.auth-form-fieldset input:-webkit-autofill,.auth-form-fieldset input:-webkit-autofill:active,.auth-form-fieldset input:-webkit-autofill:focus,.auth-form-fieldset input:-webkit-autofill:hover {
    border: 1px solid #135579;
    -webkit-text-fill-color: #9fb3c8;
    -webkit-box-shadow: inset 0 0 0 1000px #061427,0 0 8px 0 rgba(47,184,241,.35);
    -webkit-animation: none;
    animation: none
}

.auth-form-fieldset.error-field input,.auth-form-fieldset.error-field select,.auth-form-fieldset.error-field textarea {
    background: rgba(0,13,32,.3)!important;
    border: 1px solid rgba(241,95,95,.5)!important;
    box-shadow: 0 0 5px 0 rgba(241,95,95,.25)!important
}

.auth-form-fieldset.error-field input:focus,.auth-form-fieldset.error-field select:focus,.auth-form-fieldset.error-field textarea:focus {
    -webkit-animation: glow-input-error .8s ease-out infinite alternate;
    animation: glow-input-error .8s ease-out infinite alternate
}

交互动画

@-webkit-keyframes flicker-animation {
    0%,50% {
        opacity: 0
    }

    51%,to {
        opacity: 1
    }
}

@keyframes flicker-animation {
    0%,50% {
        opacity: 0
    }

    51%,to {
        opacity: 1
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em
    }
}

@keyframes ellipsis {
    to {
        width: 1.25em
    }
}

@-webkit-keyframes glow-input-default {
    0% {
        box-shadow: 0 0 5px 0 rgba(47,184,241,.25)
    }

    to {
        box-shadow: 0 0 8px 0 rgba(47,184,241,.35)
    }
}

@keyframes glow-input-default {
    0% {
        box-shadow: 0 0 5px 0 rgba(47,184,241,.25)
    }

    to {
        box-shadow: 0 0 8px 0 rgba(47,184,241,.35)
    }
}

@-webkit-keyframes glow-input-error {
    0% {
        box-shadow: 0 0 5px 0 rgba(241,95,95,.25)
    }

    to {
        box-shadow: 0 0 8px 0 rgba(241,95,95,.35)
    }
}

@keyframes glow-input-error {
    0% {
        box-shadow: 0 0 5px 0 rgba(241,95,95,.25)
    }

    to {
        box-shadow: 0 0 8px 0 rgba(241,95,95,.35)
    }
}

@-webkit-keyframes loading-spinner-animation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes loading-spinner-animation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes grain-animation {
    0%,to {
        transform: translate(0)
    }

    10% {
        transform: translate(-5%,-10%)
    }

    20% {
        transform: translate(-15%,5%)
    }

    30% {
        transform: translate(7%,-25%)
    }

    40% {
        transform: translate(-5%,25%)
    }

    50% {
        transform: translate(-15%,10%)
    }

    60% {
        transform: translate(15%)
    }

    70% {
        transform: translateY(15%)
    }

    80% {
        transform: translate(3%,35%)
    }

    90% {
        transform: translate(-10%,10%)
    }
}

@keyframes grain-animation {
    0%,to {
        transform: translate(0)
    }

    10% {
        transform: translate(-5%,-10%)
    }

    20% {
        transform: translate(-15%,5%)
    }

    30% {
        transform: translate(7%,-25%)
    }

    40% {
        transform: translate(-5%,25%)
    }

    50% {
        transform: translate(-15%,10%)
    }

    60% {
        transform: translate(15%)
    }

    70% {
        transform: translateY(15%)
    }

    80% {
        transform: translate(3%,35%)
    }

    90% {
        transform: translate(-10%,10%)
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes glitch-animation-1 {
    0% {
        clip: rect(42px,9999px,44px,0)
    }

    5% {
        clip: rect(12px,9999px,59px,0)
    }

    10% {
        clip: rect(48px,9999px,29px,0)
    }

    15.0% {
        clip: rect(42px,9999px,73px,0)
    }

    20% {
        clip: rect(63px,9999px,27px,0)
    }

    25% {
        clip: rect(34px,9999px,55px,0)
    }

    30.0% {
        clip: rect(86px,9999px,73px,0)
    }

    35% {
        clip: rect(20px,9999px,20px,0)
    }

    40% {
        clip: rect(26px,9999px,60px,0)
    }

    45% {
        clip: rect(25px,9999px,66px,0)
    }

    50% {
        clip: rect(57px,9999px,98px,0)
    }

    55.0% {
        clip: rect(5px,9999px,46px,0)
    }

    60.0% {
        clip: rect(82px,9999px,31px,0)
    }

    65% {
        clip: rect(54px,9999px,27px,0)
    }

    70% {
        clip: rect(28px,9999px,99px,0)
    }

    75% {
        clip: rect(45px,9999px,69px,0)
    }

    80% {
        clip: rect(23px,9999px,85px,0)
    }

    85.0% {
        clip: rect(54px,9999px,84px,0)
    }

    90% {
        clip: rect(45px,9999px,47px,0)
    }

    95% {
        clip: rect(37px,9999px,20px,0)
    }

    to {
        clip: rect(4px,9999px,91px,0)
    }
}

@keyframes glitch-animation-1 {
    0% {
        clip: rect(42px,9999px,44px,0)
    }

    5% {
        clip: rect(12px,9999px,59px,0)
    }

    10% {
        clip: rect(48px,9999px,29px,0)
    }

    15.0% {
        clip: rect(42px,9999px,73px,0)
    }

    20% {
        clip: rect(63px,9999px,27px,0)
    }

    25% {
        clip: rect(34px,9999px,55px,0)
    }

    30.0% {
        clip: rect(86px,9999px,73px,0)
    }

    35% {
        clip: rect(20px,9999px,20px,0)
    }

    40% {
        clip: rect(26px,9999px,60px,0)
    }

    45% {
        clip: rect(25px,9999px,66px,0)
    }

    50% {
        clip: rect(57px,9999px,98px,0)
    }

    55.0% {
        clip: rect(5px,9999px,46px,0)
    }

    60.0% {
        clip: rect(82px,9999px,31px,0)
    }

    65% {
        clip: rect(54px,9999px,27px,0)
    }

    70% {
        clip: rect(28px,9999px,99px,0)
    }

    75% {
        clip: rect(45px,9999px,69px,0)
    }

    80% {
        clip: rect(23px,9999px,85px,0)
    }

    85.0% {
        clip: rect(54px,9999px,84px,0)
    }

    90% {
        clip: rect(45px,9999px,47px,0)
    }

    95% {
        clip: rect(37px,9999px,20px,0)
    }

    to {
        clip: rect(4px,9999px,91px,0)
    }
}

@-webkit-keyframes glitch-animation-2 {
    0% {
        clip: rect(65px,9999px,100px,0)
    }

    5% {
        clip: rect(52px,9999px,74px,0)
    }

    10% {
        clip: rect(79px,9999px,85px,0)
    }

    15.0% {
        clip: rect(75px,9999px,5px,0)
    }

    20% {
        clip: rect(67px,9999px,61px,0)
    }

    25% {
        clip: rect(14px,9999px,79px,0)
    }

    30.0% {
        clip: rect(1px,9999px,66px,0)
    }

    35% {
        clip: rect(86px,9999px,30px,0)
    }

    40% {
        clip: rect(23px,9999px,98px,0)
    }

    45% {
        clip: rect(85px,9999px,72px,0)
    }

    50% {
        clip: rect(71px,9999px,75px,0)
    }

    55.0% {
        clip: rect(2px,9999px,48px,0)
    }

    60.0% {
        clip: rect(30px,9999px,16px,0)
    }

    65% {
        clip: rect(59px,9999px,50px,0)
    }

    70% {
        clip: rect(41px,9999px,62px,0)
    }

    75% {
        clip: rect(2px,9999px,82px,0)
    }

    80% {
        clip: rect(47px,9999px,73px,0)
    }

    85.0% {
        clip: rect(3px,9999px,27px,0)
    }

    90% {
        clip: rect(26px,9999px,55px,0)
    }

    95% {
        clip: rect(42px,9999px,97px,0)
    }

    to {
        clip: rect(38px,9999px,49px,0)
    }
}

@keyframes glitch-animation-2 {
    0% {
        clip: rect(65px,9999px,100px,0)
    }

    5% {
        clip: rect(52px,9999px,74px,0)
    }

    10% {
        clip: rect(79px,9999px,85px,0)
    }

    15.0% {
        clip: rect(75px,9999px,5px,0)
    }

    20% {
        clip: rect(67px,9999px,61px,0)
    }

    25% {
        clip: rect(14px,9999px,79px,0)
    }

    30.0% {
        clip: rect(1px,9999px,66px,0)
    }

    35% {
        clip: rect(86px,9999px,30px,0)
    }

    40% {
        clip: rect(23px,9999px,98px,0)
    }

    45% {
        clip: rect(85px,9999px,72px,0)
    }

    50% {
        clip: rect(71px,9999px,75px,0)
    }

    55.0% {
        clip: rect(2px,9999px,48px,0)
    }

    60.0% {
        clip: rect(30px,9999px,16px,0)
    }

    65% {
        clip: rect(59px,9999px,50px,0)
    }

    70% {
        clip: rect(41px,9999px,62px,0)
    }

    75% {
        clip: rect(2px,9999px,82px,0)
    }

    80% {
        clip: rect(47px,9999px,73px,0)
    }

    85.0% {
        clip: rect(3px,9999px,27px,0)
    }

    90% {
        clip: rect(26px,9999px,55px,0)
    }

    95% {
        clip: rect(42px,9999px,97px,0)
    }

    to {
        clip: rect(38px,9999px,49px,0)
    }
}