background

Today I went to CodePen and saw this very interesting effect:

CodePen Demo — Material Design Menu By Bennett Feely

This effect still has some points worth discussing and learning, let’s take a look.

How to achieve such a similar effect?

First, think about what you would do if you were asked to achieve the above results.

Here’s a quick list of possible solutions:

  1. Shadow box – shadow
  2. The gradient radial gradient
  3. Scaling transform: scale ()

Just go through them one by one quickly.

Use box-shadow

If box-shadow is used, the code looks like this:

<div class="g-container">
    <div class="g-item"></div>
</div>
Copy the code
.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; }}Copy the code

The core lies in:

  1. The outer one is setoverflow: hideenThe mask
  2. The inner element hover when implementedbox-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fffThe change of the

The effect is as follows:

The overall animation is simulated, but it has two fatal problems:

  1. When we mouse away from the circle, the whole animation starts to reverse, the white area starts to disappear, and if we want to do the button operation, we can’t do it
  2. Elements hidden in the rectangle after the animation is expanded are not easy to place

So, box-shadow looks good, but it has to be abandoned. CodePen Demo — box-shadow zoom in animation

Use gradient radial-gradient

We can also restore the above effect by using the radial gradient and CSS @property below:

<div class="g-container"></div>
Copy the code
@property --size {
  syntax: '<length>';
  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; }}Copy the code

We control the radial gradient of the animation effect, in hover, originally just a small circle background, into a large circle background, the effect is as follows:

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

  1. Since it is a background change, the mouse does not need to hover over the small circle, just need to enter the div scope, animation will start, this is obviously wrong
  2. And the firstbox-shadowSimilarly, the DOM of a navigation element hidden under white is hard to place

CodePen Demo — Radial -gradient zoom in animation

Emmm, there is another way to scale transform: scale(), which also causes problems.

So here, to achieve the above effect, the core lies in:

  1. The mouse must hover over the circle to start the animation, and the mouse can move freely within the expanded area without retracting the animation effect
  2. After the animation is expanded, the placement of the DOM inside should not be too troublesome. It is best to control the display and hiding of the content inside without the help of Javascript

Clip-path is used to realize dynamic clipping

So, here, we actually need a dynamic clipping of regions.

In my article – How to implement Overflow: Hidden Without Using Overflow: Hidden? Clip-path describes several ways of clipping elements in CSS. The clip-path is the most suitable for clipping elements in CSS.

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

<div class="g-container"></div>
Copy the code
.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); }}Copy the code

We only need to use clip-path to clip a rectangular div into a circle at the beginning with clip-path: Circle (20px at 44px 44px). When hover, expand the radius of the clipped circle to the entire rectangle.

The effect is as follows:

In this way, we can achieve a perfect image, and the built-in DOM elements, directly into the div can be written.

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

The effect is as follows:

CodePen Demo — clip-path zoom in animation

Clip-path dynamic region clipping is a very interesting skill, using clip-path to achieve dynamic region clipping, I hope you can master.

The last

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.