html下划线输入框自动延伸,CSS3 简单的文本悬停下划线延伸动画

CSS

语言：

CSSSCSS

确定

body,

html {

font-size: 20px;

font-family: Georgia, Cambria, "Times New Roman", Times, serif;

line-height: 1.5;

color: #57493d;

background-color: #a6f2cb;

}

.banner {

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

-o-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

position: absolute;

top: 50%;

left: 50%;

margin: -20px 0 0;

text-align: center;

}

.stretching {

position: relative;

color: #e05d64;

font-weight: bold;

text-decoration: none;

}

.stretching:before {

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

position: absolute;

right: 50%;

left: 50%;

bottom: -2px;

display: block;

height: 1px;

background-color: #e05d64;

content: '';

}

.stretching:hover:before {

right: 0;

left: 0;

}