CSS3之线条特效(鼠标悬停线条从中间变长)
当鼠标悬停在红色圆上时,福字下面出现一条白色的线条从中间不断向两边延伸
<!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> <div id="wrap"> <p class="good">福</p> <div id="line"></div> </div> </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; }