Shulou(Shulou.com)06/02 Report--

This article introduces JS how to use clip-path to achieve dynamic region cutting function, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Background

When I went to CodePen today, I saw this very interesting effect:

CodePen Demo-Material Design Menu By Bennett Feely

There are still some points worth discussing and learning about this effect, let's take a look at it together.

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 is a brief list of possible ways:

Shadow box-shadow

Gradient radial-gradient

Zoom transform: scale ()

One by one quickly.

Using box-shadow to implement

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

.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: 00 # fff; transition: box-shadow .3s linear; &: hover {box-shadow: 000 420px # fff }}

The core is:

An outer mask with overflow: hideen set

When the inner element hover, implement a change from box-shadow: 0 000 # fff to box-shadow: 0 000 420px # fff

The effect is as follows:

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

When our mouse leaves the circle, the whole animation begins to go in reverse, and the white area begins to disappear. if we want to do the button operation, it can't be done.

The elements hidden in the rectangle after the expansion of the animation are not easy to place.

So box-shadow looks good, but he has to give up. The code of the above Demo-- CodePen Demo-- box-shadow zoom in animation

Using gradient radial-gradient implementation

We can also restore the above effect by using the radial gradient radial-gradient plus CSS @ property:

Property-- size {syntax:'; 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;}}

By controlling the animation effect of the radial gradient, we can change the original small circle background into a large circle background in hover. The effect is as follows:

Emmm, the effect is indeed restored, and the problem is fatal:

Because of the change of the background, the mouse does not need to hover to the small circle, just need to enter the range of div, and the animation will begin, which is obviously wrong.

Similar to the first box-shadow method, the DOM of navigation elements hidden under white is not easy to place.

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

Emmm, there is another way, by zooming transform: scale (), there will also be some problems, we will not continue to expand here.

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

The mouse has to hover to the circle to start the animation, and the mouse can move freely within the expanded range without reversing the animation effect.

After the animation is unfolded, the placement of the DOM in it should not be too troublesome. It is best to control the display and hiding of the contents without the help of Javascript.

Using clip-path to realize dynamic region clipping

So, here, we actually need a dynamic area clipping.

In my article-- how to implement overflow: hidden without using overflow: hidden? This paper introduces several ways to cut elements in CSS, and the most suitable one for this effect is-- clip-path.

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

.g-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);}}

We just need to use clip-path, at the beginning, a rectangular div, using clip-path: circle (20px at 44px 44px) to cut into a circle, when hover, expand the radius of the clipped circle to the entire rectangular range.

The effect is as follows:

In this way, we can perfectly achieve the effect of the picture, and the built-in DOM element can be written directly into the div.

11111 22222 33333 44444

The effect is as follows:

CodePen Demo-clip-path zoom in animation

An interesting technique is to use clip-path to achieve dynamic region clipping.

About JS how to use clip-path to achieve dynamic region cutting function is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.