clip-path 实现动态展开

58天前449

有时大家会做到鼠标放置时隐藏 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 即可实现,感兴趣的可以试试!

CSS分享16 

clip-path 实现动态展开 - Jdeal | Life is like a Design.