CSS3之線條特效(滑鼠懸停線條從中間變長)
阿新 • • 發佈:2019-01-24
當滑鼠懸停在紅色圓上時,福字下面出現一條白色的線條從中間不斷向兩邊延伸
<!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>