CSS3 clip-path property in action: dynamic area cropping

This article will take you to understand CSS3 clip-path (clipping path) and introduce how to use clip-path to achieve dynamic area cropping. I hope it will be helpful to everyone!

I visited CodePen today and saw such an interesting effect:

CodePen Demo -- Material Design Menu By Bennett Feely

Website: https://codepen.io/bennettfeely/pen/fHdFb

There are still some points worth exploring and learning about this effect. Let’s take a look. Get up and take a look.

How to achieve such a similar effect?

First of all, think about it, if you were asked to achieve the above effect, what would you do?

Here I simply list some possible methods:

• shade box-shadow

• gradient radial-gradient

• Scale transform: scale()

Quickly go through one by one.

Use box-shadow to achieve

If you use box-shadow, the code is roughly as follows:

<div class="g-container">
    <div class="g-item"></div>
</div>

rrree

The core is:

• The outer layer has a mask set with overflow: hideen

• When the inner element hovers, implement a box-shadow : 0 0 0 0 #fff to box-shadow: 0 0 0 420px #fff Change

The effect is as follows:

The overall animation is simulated, but its most fatal problems are two:

• When our mouse leaves the circle, the entire animation The animation begins to proceed in reverse, and the white area begins to disappear. If we want to perform button operations, it cannot be completed.

• Elements hidden within the rectangle after the animation is expanded are not easy to place.

So, box-shadow looks good, but I can only give up.

The code of the above Demo--CodePen Demo--box-shadow zoom in animation

Website: https://codepen.io/Chokcoco/pen/jOLRQNy

Use gradient radial-gradient to achieve

Below we use radial gradient radial-gradient Add CSS @property, you can also restore the above effect:

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

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

By controlling the animation effect of the radial gradient, when hovering, the original small circle background becomes a large circle background. The effect is as follows:

##emmm, The effect is indeed restored, and the problem is also fatal:

• Because it is a change in the background, the mouse does not need to hover over the small circle, it only needs to enter the range of the div, and the animation will start. , this is obviously wrong

• Similar to the first

  box-shadow method, the DOM of the navigation element hidden under white is not easy to place

The code of the above Demo -- CodePen Demo -- radial-gradient zoom in animation

Website: https://codepen.io/Chokcoco/pen/RwZOqWb

emmm, there is another method, by scaling

transform: scale(), there will be certain problems, so I won’t continue to expand here.

So here, if you want to achieve the above effect, the core is:

• The mouse must hover over the circle to start the animation, and the mouse can be moved after the expansion. Move freely within the range without retracting the animation effect

• After the animation is expanded, the placement of the DOM inside should not be too troublesome. It is best if you can control the display and hiding of the content inside without using Javascript.

Use clip-path to achieve dynamic area cropping

So, here, we actually need a

dynamic area cropping.

In my article --

How to implement overflow: hidden without using overflow: hidden? , introduces several ways to clip elements in CSS, and among them, the most suitable one to use this effect is -- clip-path.

Using

clip-path, the dynamic clipping function can be very well implemented, and the code is also very simple:

@property --size {
  syntax: &#39;<length>&#39;;
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

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

We only need to use

clip -path, at the beginning, use clip-path: circle(20px at 44px 44px) to cut a rectangular div into a circle. When hovering, expand the radius of the cutting circle to the entire rectangular range.

The effect is as follows:

这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。

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

效果如下：

CodePen Demo -- clip-path zoom in animation

网址：https://codepen.io/Chokcoco/pen/yLorrRm

很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

The above is the detailed content of CSS3 clip-path property in action: dynamic area cropping. For more information, please follow other related articles on the PHP Chinese website!