css计数器及鼠标经过从中间扩散一个矩形（正方形长方形均可）

<!DOCTYPE html>
<html>
<head>
    <title>css计数器--兼容IE8</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
            counter-reset: list;
        }
        li{
            position: relative;
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
            counter-increment: item;
        }
        li:after{
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transition:all .3s linear;
            opacity: 0;
            background: #000;
        }
        li:hover:after{
            width: 100%;
            height: 100%;
            top: 0;
            left:0;
            opacity: 0.3;
        }
        li:before{
            content: counter(item)".";
            display: inline-block;
        }
    </style>
</head>

<body>
<ul>
    <li>
        aaa
    </li>
    <li>
        aaa
    </li>
    <li>
        aaa
    </li>
</ul>
</body>
</html>

css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）

css计数器及鼠标经过从中间扩散一个矩形（正方形长方形均可）