CSS+DIV实现鼠标经过背景变色 [onmouseover; onmouseout]

css:

.ani li{        position:relative;

         width:100px;

         height:100px;

        overflow: hidden;

         float: left;

       display: flex;

      justify-content: center;

       align-items: center;}
        .ani li:after{
          content:"";
          position:absolute;
          width:150%;
          height:0;
            left: 50%;
            top: 50%;

          transition:all 0.5s;
             z-index: -1;
        }
        .ani li:hover:after{
            background: #f5f5f5;
            height:150%;
            transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        }

html:

<div class="ani">
        <li ><div style="width: 50%;height: 50%; background: #000;"></div>旋转</li>
        <li ><div style="width: 50%;height: 50%; background: #000;"></div>旋转</li>
        <li ><div style="width: 50%;height: 50%; background: #000;"></div>旋转</li>
    </div>