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

来源：互联网发布：淘宝易轩数码靠谱吗编辑：程序博客网时间：2024/04/28 04: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>

0 0