cf官网扒小条效果-css

发布于 2020-04-02  245 次阅读


效果

小条
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小条</title>
    <style>
        /** { background-color: rgba(255,0,0,.2); }
        * * { background-color: rgba(0,255,0,.2); }
        * * * { background-color: rgba(0,0,255,.2); }
        * * * * { background-color: rgba(255,0,255,.2); }
        * * * * * { background-color: rgba(0,255,255,.2); }
        * * * * * * { background-color: rgba(255,255,0,.2); }*/
        .zhubin{
            display: inline-block;
        }
        .zhubin a{
            position: relative;
            text-decoration: none;
            color: #daa520;
            font-weight: 100%;
            margin: 0 200px;
            display: inline-block;
        }
        .zhubin a:before{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -3px;/*距离*/
            width: 0;/*初始宽度*/
            height: 5px;/*高度*/
            background: pink;/*颜色*/
            transition: all .5s;/*速度*/
        }
        .zhubin a:hover:before{
            width: 100%;/*最后宽度*/
            left: 0;/*最后的位置   定位左边*/
            /*right: 0;*/
        } 
    </style>
</head>
<body>
    <div class="zhubin">
        <a href="#">-------我是小条-------</a>
        <a href="#">-------我是小条-------</a>
        <a href="#">-------我是小条-------</a>
        <a href="#">-------我是小条-------</a>
    </div>
    
</body>
</html>

算是自己的学习记录,重点都打了备注,我是为了页面的布局不受影响加了一个class,当然也可以不使用a标签