有时大家会做到鼠标放置时隐藏 div 展开的效果，一般情况下用 js 写非常简单，display 即可实现，当然需要的话再加点效果也不是不可以。

不过今天要使用的为纯CSS方法，废话不多说，直接看代码，非常简单：

<div class="container"></div>

.container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

只需利用 clip-path，在最开始的时候，将矩形 div，利用 clip-path:circle(20px at 44px 44px)裁剪成圆，当 hover 时，扩大裁剪圆的半径到整个矩形范围即可，如下图：

这样，我们就能完美的实现鼠标放置展开的效果，并且内置的 DOM 元素，可以直接写进 div 内部，如下：

<div class="container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

很有意思的一个交互功能，仅用几行 CSS 即可实现，感兴趣的可以试试！