您的位置：首页 > Web前端 > CSS

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

2017-01-19 22:52 267 查看


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



<!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>
<style>
#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;
}
</style>
</head>
<body>
<div id="wrap">
<p class="good">福</p>
<div id="line"></div>
</div>
</body>
</html&g
4000
t;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  线条延伸特效
相关文章推荐
新的分享
章节导航