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

最新推荐文章于 2023-03-08 16:47:21 发布

Andone_hsx

最新推荐文章于 2023-03-08 16:47:21 发布

阅读量9.4k

点赞数 1

分类专栏：前端小实例文章标签：线条延伸特效

本文链接：https://blog.csdn.net/andone_hsx/article/details/54620140

版权

前端小实例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写图片描述

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

这里写图片描述

<!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>

Andone_hsx

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS3之线条特效（鼠标悬停线条从中间变长）

当鼠标悬停在红色圆上时，福字下面出现一条白色的线条从中间不断向两边延伸<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=
复制链接

扫一扫