hover时下划线从中间向两端渐变 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 50px;
            height: 30px;
        }
        li{
            text-align: center;
            list-style: none;
            position: relative;
        }
        li:hover:before{
            left: 0;
            width: 100%;
        }
        li:before{
            content: "";
            width: 0;
            border-bottom: 4px solid red;
            position: absolute;
            bottom: 0;
            left: 50%;
            transition: all linear 1s;
        }
        li a{
            text-decoration: none;
        }

        .box1{
            background: url("../images/movie_pic.png") no-repeat;
        }
        .box1 a:hover img{
            transform: scale(1.5);
            opacity: 0;
            transition: all linear 2s;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>
            <a href="">文字</a>
        </li>
    </ul>
    <div class="box1">
        <a href=""><img src="../images/movie_pic.png" alt=""/></a>
    </div>
</body>
</html>

posted on 2017-10-22 21:15  石婧  阅读(874)  评论(0)    收藏  举报

导航