您现在的位置：首页 >> 前端 >> 内容

CSS3之线条特效（鼠标悬停线条从中间变长）

时间：2017/1/20 9:53:18 点击：

　　核心提示：CSS3之线条特效（鼠标悬停线条从中间变长）当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸 !doctype htmlhtml headmeta charset=UTF-8m...

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

<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Document</title>
     </head>
     <body>
        <p id="wrap">
            <p class="good">福</p>
            <p id="line"></p>
        </p>
     </body>
</html>

#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;
}