CSS realizes the effect of Ant Design official website Logo egg effect

In recent projects, Ant Design more accesses, which is still very good. I don’t know if you have found such an effect. On the official website, if the mouse is placed on the Logo, i will keep changing. After leaving, it will stop and change again. It can be regarded as a little easter egg (maybe I I didn't find it before 🤣), the demo is as follows:

However, it is not surprising that I did not find it, because this effect is realized by js, and it must wait for the loading to complete before it can take effect, and the official website is sometimes very slow. hover effect of

Well, after thinking about it, this effect can be achieved with pure CSS, the implementation cost is low, and the above loading problems can be effectively avoided. Let's take a look.

First, the principle of CSS implementation

The whole implementation principle is roughly as follows

1. Prepare a material containing all the small icons
2. Create a CSS frame-by-frame animation that changes the background position
3. Control animation running by mouse hover

2. Material preparation

In order to avoid multiple requests and to facilitate the creation of animations, all the small icon materials are combined together (saved from the official website), just like the previous "Sprite Map", as follows

Suppose the HTML structure is like this

<h1 class="logo">Ant Design</h1>

For better semantics, it is recommended to keep the text here, and then hide the text by other means (such as transparency). The logo can be used as a background image, and then the small changeable icon can be generated with pseudo elements (all decorative elements can be pseudo-elements). Element to generate, to ensure the cleanliness of HTML), CSS is as follows

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
}

static layout

Second, CSS frame-by-frame animation

Then there is the animation. You only need to use the steps() function in the CSS animation function to achieve frame-by-frame animation

First define a keyframe and change the background position

@keyframes random {
  to {
    background-position: 100%;
  }
}

There are a total of 11 pieces of small icons here, and the changes between them are 10 steps, so the animation settings are as follows

.logo::after{
    /*其他样式*/
  animation: random 1s steps(10) infinite;
}

This results in an infinite loop frame-by-frame animation

3. Pause and run CSS animations

By default, CSS animation is run by default, but now the demand is only a mouse hover up before moving.

Some students may do this. There is no animation by default, and animation is created when hovering, as follows

.logo::after{
    /*默认无动画*/
}
.logo:hover::after{
  animation: random 1s steps(10) infinite;
}

But there are two problems with doing this:

1. More performance cost per animation created in real-time
2. The position is restored to the initial state every time the mouse is left.

Therefore, this approach is not advisable

In addition to the above methods to control the animation running, you can also actively set the pause animation-play-state

.logo::after{
    /*其他样式*/
  animation: random 1s steps(10) infinite;
  animation-play-state: paused; /*动画暂停*/
}

In this way, it will not move by default, and then "run" hover

.logo:hover::after{
  animation-play-state: running; /*动画运行*/
}

The effect is as follows

Fourth, specify the initial position

Now the default is that the small icon is the first one, if you want to specify another one, such as ❤

How to deal with this situation

First of all, we thought that we can manually change the background position, ❤ is in the 8th, so

.logo::after{
  /*其他样式*/
  background-position: -224px; /* 32 * 7 */
}

The effect is as follows

In this way, there are more problems. Since the starting position of the animation is changed, the animation moves from the 8th place to the far right, and the left one does not pass, and the step needs to be readjusted.

In addition to this way, the animation can also be achieved by "negative delay", to add animation after a negative delay, the animation will move to the next position in advance .

For example, if you want to specify the position of the 7th frame in the future, you can delay 7/10 of the negative total motion duration, and the implementation is as follows

.logo::after{
  /*其他样式*/
  animation-delay: -.7s; /* 7 / 10 * 1s*/
}

This will not affect the original animation, perfect realization

The full code can be accessed at: Ant Design Logo (codepen.io)

Attach the complete code (codepen seems to be unstable recently)

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
  animation: random 1s -.7s steps(10) infinite;
  animation-play-state: paused;
}
.logo:hover::after{
  animation-play-state: running;
}
@keyframes random {
  to {
    background-position: 100%;
  }
}

V. Summary and Explanation

The above is the CSS implementation for the logo effect of Ant Design's official website. The amount of code is very small, and it also avoids the problem when js is not loaded, and the experience is better. The following is a brief summary

1. CSS rendering is timely, as long as the page is visible, CSS interaction is not affected
2. Frame-by-frame animation can be achieved through the step() function in CSS animation
3. CSS animations can be run automatically or manually paused
4. By setting a negative delay, you can make CSS animations run early

Of course, the advantages of CSS are more than these. When I open the Ant Design console, I am a little bit broken. It is actually svg link. If it is always placed on the Logo, it will continuously request pictures, and small icons will also appear. "flickering"

The volume of requests is a bit staggering. If a small partner in charge of the Ant Design official website sees this, can it be optimized?

Finally, if you think it's good and helpful to you, please like, bookmark, and forward ❤❤❤