background

In our last post on text flash effects with advanced filters, we mentioned a very interesting animation effect that Apple used to display text.

This article will bring another interesting effect, skillfully use gradient to achieve advanced sense of the full background light animation. This effect can be seen in the iPhone 13 Pro introduction page on Apple’s website:

implementation

This effect is difficult to replicate completely with CSS. CSS simulation out of the light effect shadow will be relatively Low, can only be said to be as far as possible to restore.

Each set of lights is essentially the same, so we only need to achieve one of them to achieve almost the entire effect.

Observe this effect:

The core of it is actually the Angle gradient — Conic-gradient (). Using the Angle gradient, we can roughly achieve the following effect:

<div></div>
Copy the code
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);
}
Copy the code

Look at the results:

Kind of like that. Of course, look carefully, the gradient color is not from A color to transparent end, but color A — transparent — color B, so, the other half of the light source is not so stiff, transformed CSS code:

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);
}
Copy the code

We added a color at the end of the angular gradient to get a better look:

Emm: Here, we will find that merely the angular gradient Conic-gradient () is not enough. It cannot simulate the effect of light source shadow, so we must use other attributes to achieve the effect of light source shadow.

Here, we naturally think of box-shadow. Here’s a trick, using multiple box-shadows to achieve Neon lights.

Let’s add a div to shadow the light source:

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

OK, the light is there, but the problem is we only need light on one side, so what do we do? There are many ways of clipping. Here, I introduce a clip-path method for clipping arbitrary space of elements:

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

It works like this:

In this way, we have light on one side:

Here, there is a way for CSS to implement a single shadow (you do not know the CSS shadow techniques and details), but the actual effect is not good, and finally adopted the above solution.

The next step is to superimpose the above unilateral light and angular gradient by means of positioning, rotation, etc. We can get the effect like this:

This one, it looks like it already. The next thing I need to do is get the pattern moving. There are a lot of tricks here, but the core is to use CSS @Property to animate the Angle gradient, and make the light animation and the Angle gradient overlap.

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

<div class="wrap">
    <div class="shadow"></div>
</div>
Copy the code
@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.5 s 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:... A lot of shadow code is omitted;animation: scale 2.5 s infinite alternate linear;
}
 
@keyframes scale {
    50%.100% {
        transform: rotate(225deg) scale(0); }}@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0; }}Copy the code

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

Let’s go over the steps to implement such an animation:

  1. Use angular gradientsconic-gradientThe basic framework is laid out, and there are also multiple gradients, with a dark background behind the angular gradient;
  2. By using multiplebox-shadowAchieve light and shadow effects (also known as Neon)
  3. usingclip-pathClipping an element in any region
  4. Use CSS @Property to animate gradients

All that remains is to repeat the steps above, add other gradients and lights, tweak the animation, and end up with a simple simulation like this:

Because the original effect is.mp4, we can not get the exact color, we can not get the shadow parameters, the color is directly used to take the color palette, the shadow is more random simulation, if the active file, accurate parameters, you can simulate more realistic.

The full code can be found here: CodePen — iPhone 13 Pro Gradient

The last

This article is more of a picture of fun, in practice there must be a more elegant solution to the above effect, and using CSS simulation, there should be a better way, here I just throw out a piece of advice, the process of 1, 2, 3, 4 skills themselves are worth learning.

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.