一条线从无到有(css):鼠标滑过的时候一根线从无到有?第一种方法:刚开始width:0然后鼠标滑过的时候让宽度为100

第一种方法:

刚开始width:0
然后鼠标滑过的时候让宽度为100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.变线的长短</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg{
            width: 200px;
            height: 200px;
            line-height: 200px;
            background: yellow;
            margin: 30px auto;
            text-align: center;
        }
        .bg{

        }
        .bg .line{
            width: 0;
            height: 1px;
            background: #000;
            margin: -60px auto 0;
            transition: all .5s linear;
        }
        .bg:hover .line,.bg:hover p{
            color: red;
            font-weight: 700;
        }
        .bg:hover .line{
            width: 100%;
            background: red;
        }
    </style>
</head>
<body>
<div class="bg">
    <p>梦幻西游</p>
    <div class="line"></div>
</div>
</body>
</html>

第二种方法:

开始的时候transform:scale(0)
鼠标滑过的时候transform:scale(1)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>1.变线的长短</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .bg{
           width: 200px;
           height: 200px;
           line-height: 200px;
           background: yellow;
           margin: 30px auto;
           text-align: center;
       }
       .bg{

       }
       .bg .line{
           height: 1px;
           background: #000;
           margin: -60px auto 0;
           transform: scale(0);
           transition: all .5s linear;
       }
       .bg:hover .line,.bg:hover p{
           color: red;
           font-weight: 700;
       }
       .bg:hover .line{
           background: red;
           transform: scale(1);
       }
   </style>
</head>
<body>
<div class="bg">
   <p>梦幻西游</p>
   <div class="line"></div>
</div>
</body>
</html>