CSS

语言：

CSSSCSS

确定

html {

box-sizing: border-box;

font-size: 100%;

font-family: Arial;

}

* {

box-sizing: inherit;

}

.subscribe-1 {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

width: 25.25em;

height: 5em;

margin: auto;

padding: 1em 0.75em;

border: 3px solid transparent;

border-radius: 8px;

overflow: hidden;

-webkit-transition: width 0.15s ease;

transition: width 0.15s ease;

}

.subscribe-1__active {

width: 31.25em;

border: 3px solid #358ecc;

}

.subscribe-1__success {

border: 3px solid #4cce95;

}

.subscribe-1 input[type="text"] {

color: #358ecc;

width: 75%;

height: 100%;

margin-right: 2%;

padding-left: 0.5em;

padding-right: 0.5em;

font-size: 1rem;

border: 0;

outline: 0;

}

.subscribe-1 button {

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

border: 0;

border-radius: 4px;

background: #2a72a4;

color: #fff;

cursor: pointer;

font-size: 1em;

-webkit-transition: background 0.2s ease;

transition: background 0.2s ease;

}

.subscribe-1 button:hover {

background: #358ecc;

}

.subscribe__wrapper {

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

.subscribe__toggle {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: #2a72a4;

text-align: center;

text-decoration: none;

color: #fff;

font-size: 1.25em;

line-height: 70px;

border-radius: 4px;

-webkit-transition: opacity 0.15s ease, background 0.2s ease;

transition: opacity 0.15s ease, background 0.2s ease;

}

.subscribe__toggle__hidden {

opacity: 0;

pointer-events: none;

}

.subscribe__toggle:hover {

background: #358ecc;

}

.subscribe__success {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

line-height: 70px;

color: #4cce95;

text-align: center;

background: #fff;

opacity: 0;

pointer-events: none;

-webkit-transition: opacity 0.25s 0.2s ease;

transition: opacity 0.25s 0.2s ease;

}

.subscribe__success--active {

opacity: 1;

}