Clever use of gradients to achieve high-level background light animation

background

In the previous article, clever use of filters to achieve high-level text flash switching effect , we mentioned a very interesting animation effect of Apple displaying text before.

This article will bring another interesting effect, clever use of gradients to achieve high-level background light animation. This effect is used in Apple's official website Pro 13 the iPhone introduction page in:

accomplish

It is more difficult to fully replicate this effect using CSS. The light effect shadows simulated by CSS are relatively low, which can only be said to be restored as much as possible.

In fact, each group of lights is basically the same, so we only need to implement one of them, and almost the entire effect can be achieved.

Observe this effect:

Its core is actually the angular gradient - conic-gradient() . Using the angular gradient, we can roughly achieve such an effect:

<div></div>

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            transparent),
            linear-gradient(-45deg, #060d5e, #002268);
}

See the effect:

It's kind of interesting. Of course, carefully observe that the color of the gradient does not end from one color to transparent, but color A-transparent-color B. In this way, the other half of the light source is not so blunt. The CSS code after transformation :

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
}

We added an extra color at the end of the angular gradient to get a better look and feel:

emm, at this point, we will find that only angular gradient conic-gradient() is not enough, it can not simulate the effect of light source shadow, so we must use other attributes to achieve the effect of light source shadow.

Here, we will naturally think of box-shadow . Here is a trick to use multiple box-shadow to achieve the effect of Neon lights.

Let's add another div to realize the light source shadow through it:

<div class="shadow"></div>

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: 
        0px 0 .5px hsla(170deg, 95%, 80%, 1),
        0px 0 1px hsla(170deg, 91%, 80%, .95),
        0px 0 2px hsla(171deg, 91%, 80%, .95),
        0px 0 3px hsla(171deg, 91%, 80%, .95),
        0px 0 4px hsla(171deg, 91%, 82%, .9),
        0px 0 5px hsla(172deg, 91%, 82%, .9),
        0px 0 10px hsla(173deg, 91%, 84%, .9),
        0px 0 20px hsla(174deg, 91%, 86%, .85),
        0px 0 40px hsla(175deg, 91%, 86%, .85),
        0px 0 60px hsla(175deg, 91%, 86%, .85);
}

OK, there is light, but the problem is that we only need light on one side, what should we do? There are many ways to cut, here, I introduce a method of using clip-path to cut any space of elements:

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: .....;
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}

The principle is this:

In this way, we get the light on one side:

Here, in fact, CSS also has a way to achieve one-sided shadows ( CSS shadow techniques and details that you don't know), but the actual effect is not good, and the above solution was finally adopted.

Next, uses positioning and rotation to overlap the above-mentioned single-sided light and angular gradient, and we can get this effect:

This meeting already looks a lot like it. The next thing to do is to make the whole pattern move. There are a lot of skills here. The core is still using CSS @Property to realize the animation of the angular gradient, and make the light animation and the angular gradient overlap.

We need to use CSS @Property to transform the code gradient. The core code is as follows:

<div class="wrap">
    <div class="shadow"></div>
</div>

@property --xPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 300px;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at var(--xPoint) var(--yPoint),
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
}

.shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    box-shadow: ... 此处省略大量阴影代码;
    animation: scale 2.5s infinite alternate linear;
}
 
@keyframes scale {
    50%,
    100% {
        transform: rotate(225deg) scale(0);
    }
}

@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0;
    }
}

In this way, we have achieved a complete light animation:

Let's reorganize the steps to achieve such an animation:

1. Use the angular gradient conic-gradient basic frame, and multiple gradients are also used here, behind the angular gradient is a dark background color;
2. Use multiple box-shadow achieve light and shadow effects (also known as Neon effect)
3. Use clip-path to crop any area of the element
4. Use CSS @Property to achieve gradual animation effects

The rest of the work is to repeat the above steps, add other gradients and light sources, and debug the animation. In the end, we can get such a simple simulation effect:

Since the original effect is .mp4 , the accurate color cannot be obtained, and the shadow parameters cannot be obtained. The color is directly used to pick the color palette, and the shadow is simulated at will. If the source file, the accurate parameters, can be simulated Is more realistic.

here for the complete code: 1619da3bf3a48a CodePen - iPhone 13 Pro Gradient

finally

This article is more of a happy picture. In practice, there must be a more elegant solution to the above effects, and if you use CSS simulation, there should also be a better way. Here I am just throwing some ideas, 1 and 2 in the process. , 3, 4 Some of the skills themselves are worth learning from.

Okay, this concludes this article, I hope this article will help you :)

Want to get the most interesting CSS information, don’t miss my account - 1619da3bf3a4f8 iCSS front-end interesting 1619da3bf3a4fb 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.