css鼠标移入线条延中心伸长,CSS3之线条特效（鼠标悬停线条从中间变长）

CSS3之线条特效(鼠标悬停线条从中间变长)

当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸

Document

福

#wrap {

width: 500px;

height: 500px;

border-radius: 50%;

background-color: #E4393C;

margin: 100px auto;

position: relative;

}

#wrap:befor {

content: "";

display: table;

}

p.good {

float: left;

font-size: 168px;

font-family: "楷体";

color: #fff;

margin: 148px 0 0 166px;

}

#line {

width: 0px;

height: 5px;

border-radius: 5px;

background-color: #fff;

margin: 0 auto;

position: absolute;

top: 338px;

left: 0px;

right: 0px;

transition: width 1s linear;

}

#wrap:hover #line {

width: 200px;

}