HTML5下雪动画用户登录注册响应式模板

CSS部分代码L:
@font-face {
font-weight: normal;
font-style: normal;
font-family: ‘codropsicons’;
src:url(’…/fonts/codropsicons/codropsicons.eot’);
src:url(’…/fonts/codropsicons/codropsicons.eot?#iefix’) format(‘embedded-opentype’),
url(’…/fonts/codropsicons/codropsicons.woff’) format(‘woff’),
url(’…/fonts/codropsicons/codropsicons.ttf’) format(‘truetype’),
url(’…/fonts/codropsicons/codropsicons.svg#codropsicons’) format(‘svg’);
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ‘’; display: table; }
.clearfix:after { clear: both; }

.input-container {
margin: 0 auto;
text-align: center;
overflow: hidden;
background-color: aliceblue;
}

.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}

.input__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
outline: none;
}

.input__label {
display: inline-block;
float: right;
padding: 0 1em;
width: 40%;
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.input__label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
}

.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}

.icon {
color: #ddd;
font-size: 150%;
}

/* Individual styles */

/* Haruki */

.input–haruki {
margin: 4em 1em 1em;
}

.input__field–haruki {
padding: 0.4em 0.25em;
width: 100%;
background: transparent;
color: #AFB5BB;
font-size: 1.55em;
}

.input__label–haruki {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
}

.input__label-content–haruki {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__label–haruki::before,
.input__label–haruki::after {
content: ‘’;
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
background: #6a7989;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__label–haruki::before {
top: 0;
}

.input__label–haruki::after {
bottom: 0;
}

.input__field–haruki:focus + .input__label–haruki .input__label-content–haruki,
.input–filled .input__label-content–haruki {
-webkit-transform: translate3d(0, -90%, 0);
transform: translate3d(0, -90%, 0);
}

.input__field–haruki:focus + .input__label–haruki::before,
.input–filled .input__label–haruki::before {
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
}

.input__field–haruki:focus + .input__label–haruki::after,
.input–filled .input__label–haruki::after {
-webkit-transform: translate3d(0, 0.5em, 0);
transform: translate3d(0, 0.5em, 0);
}

/* Hoshi */
.input–hoshi {
overflow: hidden;
}

.input__field–hoshi {
margin-top: 1em;
padding: 0.85em 0.15em;
width: 100%;
background: transparent;
color: #595F6E;
}

.input__label–hoshi {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0.25em;
width: 100%;
height: calc(100% - 1em);
text-align: left;
pointer-events: none;
}

.input__label-content–hoshi {
position: absolute;
}

.input__label–hoshi::before,
.input__label–hoshi::after {
content: ‘’;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10px);
border-bottom: 1px solid #B9C1CA;
}

.input__label–hoshi::after {
margin-top: 2px;
border-bottom: 4px solid red;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.input__label–hoshi-color-1::after {
border-color: hsl(200, 100%, 50%);
}

.input__label–hoshi-color-2::after {
border-color: hsl(160, 100%, 50%);
}

.input__label–hoshi-color-3::after {
border-color: hsl(20, 100%, 50%);
}

.input__field–hoshi:focus + .input__label–hoshi::after,
.input–filled .input__label–hoshi::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.input__field–hoshi:focus + .input__label–hoshi .input__label-content–hoshi,
.input–filled .input__label-content–hoshi {
-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0);
}
51% {