表单交互
.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)
}
}