Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren

Wie erzielt man den Logo-Osterei-Effekt auf der offiziellen Website von Ant Design? In diesem Artikel wird das Implementierungsprinzip analysiert und Ihnen Schritt für Schritt gezeigt, wie Sie mit reinem CSS den Easter Egg-Effekt des Logos der offiziellen Ant Design-Website realisieren können.

In den letzten Projekten wurde Ant Design häufig verwendet, was immer noch sehr gut ist. Ich weiß nicht, ob Sie diesen Effekt bemerkt haben. Wenn Sie die Maus auf das Logo bewegen, ändert sich das Symbol auf dem Buchstaben i Hör auf, und es wird sich wieder ändern, wenn du es aufstellst. Es ist ein kleines Osterei (vielleicht ist es mir vorher nicht aufgefallen), die Demonstration ist wie folgt: i上的图标会不停的变化，离开后停止，放上去重新变化，算得上是一个小彩蛋（可能我之前没发现），演示如下：

不过没发现也不意外，因为这个效果是 js 实现的，必须等待加载完成才能生效，而官网有时候又特别的慢，比如像这种还在加载的情况下，大概率是不会有以上的hover效果的

嗯，思考了一下，这种效果完全可以用纯 CSS 来完成呀，实现成本又低，又能有效避免上述的加载问题，一起看看吧

一、CSS 实现原理

整个实现原理大致如下

• 准备一个包含所有小图标的素材

• 创建一个改变背景位置的CSS逐帧动画

• 通过鼠标 hover 来控制动画运行

二、素材准备

为了避免多次请求，也为了方便创建动画，这里把所有小图标素材组合在一块（从官网另存下来的），就像以前的“雪碧图”一样，如下

假设 HTML 结构是这样的

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

为了更好的语义化，这里的文字建议保留，然后通过其他方式隐藏文字（比如透明度），可以将 logo 作为背景图片，然后可变化的小图标用伪元素生成（装饰性的元素都可以用伪元素来生成，保证HTML的整洁），CSS 如下

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

静态布局就算出来了

二、CSS 逐帧动画

然后是动画，只需要利用 CSS  动画函数中的 steps() 功能符，就可以实现逐帧动画

首先定义一个关键帧，改变背景位置就行了

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

这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下

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

这样就得到了一个无限循环的逐帧动画

三、CSS动画的暂停与运行

默认情况下，CSS动画是默认运行的，但是现在的需求是，只有鼠标 hover 上去才会动起来。

可能有同学会这样做，默认情况下没有动画，hover 的时候创建动画，如下

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

但是这样做会有两个问题：

• 每次实时创建动画会有更多的性能消耗

• 每次鼠标离开后位置就还原成初始状态了

因此，这种方式并不可取

除了上述方式可以控制动画运行之外，还可以通过animation-play-state主动设置暂停，如下

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

这样下来，默认就不会动了，然后在hover

Aber es ist nicht verwunderlich, dass ich es nicht gefunden habe, denn dieser Effekt ist Wird von js implementiert und Sie müssen warten, bis der Ladevorgang abgeschlossen ist, bevor er wirksam wird. Die offizielle Website ist manchmal sehr langsam, wie zum Beispiel diese. Beim Laden besteht eine hohe Wahrscheinlichkeit, dass der obige schwebtCode>-Effekt wird nicht auftreten<p><img src="https://img.php.cn/upload/image/954/129/943/164333813080757Bringen%20Sie%20Ihnen%20Schritt%20f%C3%BCr%20Schritt%20bei,%20wie%20Sie%20mit%20reinem%20CSS%20den%20Logo-Easter-Egg-Effekt%20von%20AntDesign%20imitieren" title="164333813080757Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren"><img src="https://img.php.cn/upload/image/690/658/569%20/1643338042381951.png" title="1643338042381951.png" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren "></p> <h2 data-id="heading-4">Nun, wenn man darüber nachdenkt, kann dieser Effekt mit reinem CSS erzielt werden. Die Implementierungskosten sind gering und können effektiv vermieden werden. Werfen wir einen Blick auf die oben genannten Ladeprobleme</h2> <h2 data-id=" heading-0">1. CSS-Implementierungsprinzip</h2> <p></p>Das gesamte Implementierungsprinzip ist ungefähr wie folgt<p></p> <ul style="list-style-type: disc;"> <li> <img src="https://img.php.cn/upload/image/839/598/641/1643338135154535.png" title="1643338135154535.png" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren">Bereiten Sie ein Material vor, das alle kleinen Symbole enthält li></li> <li><p>Erstellen Sie eine CSS-Frame-für-Frame-Animation, die die Hintergrundposition ändert</p></li> <li> <p>Steuern Sie den Animationslauf durch Bewegen der Maus</p> li></li> </ul> <h2 data-id="heading-1">2. Materialvorbereitung</h2> <p></p>Um Mehrfachanfragen zu vermeiden und die Erstellung von Animationen zu erleichtern, werden hier alle kleinen Symbolmaterialien zusammengefasst (von der offiziellen Website gespeichert), genau wie beim vorherigen „Sprite“. Bild“, wie folgt: <p><img src="https://img.php.cn/upload/image/151/284/584/1643338141715418.gif" title="1643338141715418.gif" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren"> /></p>🎜Gehen Sie davon aus, dass die HTML-Struktur so ist🎜<pre class="brush:css;toolbar:false;">.logo:hover::after{ animation-play-state: running; /*动画运行*/ }</pre>🎜Für eine bessere Semantik wird empfohlen, den Text hier beizubehalten und ihn dann durch andere Methoden (z. B. Transparenz) auszublenden. Sie können das Logo als Hintergrund verwenden Bild, und dann werden die veränderbaren kleinen Symbole mithilfe von Pseudoelementen generiert (dekorative Elemente können mithilfe von Pseudoelementen generiert werden, um die Sauberkeit des HTML sicherzustellen). Das CSS lautet wie folgt: Das statische Layout wird berechnet: <img src="%E2%80%9Ehttps" : title="1643338108302851.png" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren">🎜<h2 data-id="heading -2 ">2. CSS-Frame-by-Frame-Animation🎜🎜Dann müssen Sie für die Animation nur <a href="https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps%20verwenden%20-step%20in%20der%20CSS-Animationsfunktion%20-start-end/" target="_blank" title="https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/" textvalue="steps()">steps()🎜 Funktionscode kann eine Frame-für-Frame-Animation realisieren🎜🎜Definieren Sie zunächst einen Schlüsselrahmen und ändern Sie die Hintergrundposition🎜<pre class="brush:css;toolbar:false;">.logo::after{ /*其他样式*/ background-position: -224px; /* 32 * 7 */ }</pre>🎜Es gibt insgesamt <strong>11</strong> Kleine Symbole hier und die Änderungen zwischen ihnen. Es sind <strong>10</strong> Schritte, daher sind die Animationseinstellungen wie folgt🎜<pre class="brush:css;toolbar:false;">.logo::after{ /*其他样式*/ animation-delay: -.7s; /* 7 / 10 * 1s*/ }</pre>🎜Auf diese Weise erhalten wir eine Endlosschleife einer Bild-für-Bild-Animation🎜🎜🎜<h2 data-id="heading-3">3. CSS-Animation anhalten und ausführen🎜🎜Standardmäßig wird die CSS-Animation standardmäßig ausgeführt, die aktuelle Anforderung besteht jedoch darin, dass sie sich nur bewegt, wenn der Mauszeiger bewegt wird hoch. 🎜🎜Einige Schüler tun dies möglicherweise standardmäßig nicht und die Animation wird beim Bewegen des Mauszeigers erstellt, wie unten gezeigt. 🎜<pre class="brush:css;toolbar:false;">.logo{ width: 500px; height: 100px; position: relative; color: transparent; background: url(&amp;#39;https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg&amp;#39;) center/contain no-repeat; cursor: pointer; } .logo::after{ content: &amp;#39;&amp;#39;; position: absolute; width: 32px; height: 32px; background: url(&amp;#39;https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg&amp;#39;) 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%; } }</pre> 🎜Aber es treten dabei zwei Probleme auf: 🎜<ul style="list-style-type: disc;"> <li>🎜Jedes Mal, wenn Sie eine Animation in Echtzeit erstellen, wird mehr Leistung verbraucht🎜</li> <li>🎜Jedes Mal, wenn Sie die Maus verlassen, wird die Position auf den Ausgangszustand zurückgesetzt🎜 li></li> </ul>🎜<img src="https://img.php.cn/upload/image/303/325/641/164333812541013Bringen%20Sie%20Ihnen%20Schritt%20f%C3%BCr%20Schritt%20bei,%20wie%20Sie%20mit%20reinem%20CSS%20den%20Logo-Easter-Egg-Effekt%20von%20AntDesign%20imitieren" title="164333812541013Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren" alt="Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren">🎜🎜Daher ist diese Methode nicht Nicht ratsam🎜🎜Zusätzlich zu der oben genannten Methode zur Steuerung der Animationsausführung können Sie die Pause auch aktiv über <code>animation-play-state wie folgt festlegen 🎜rrreee🎜Auf diese Weise wird es standardmäßig nicht verschoben, und dann schwebt 🎜rrreee🎜Der Effekt ist wie folgt🎜🎜🎜🎜🎜4. Geben Sie die Anfangsposition an🎜 🎜Die Standardeinstellung ist nun, dass das kleine Symbol das erste ist, z. B. 🎜🎜 🎜🎜🎜Wie man mit dieser Situation umgeht🎜🎜Zunächst dachten wir, dass wir den Hintergrund manuell ändern können Position, also die 8., also 🎜rrreee🎜Der Effekt ist wie folgt🎜🎜🎜🎜

这样下来，问题更多，由于改变了动画的起始位置，动画从第 8 个的地方运动到最右侧，左边的都不经过了，step 也需要重新调整。

除了这种方式，还可以通过动画的“负延迟”来实现，给动画添加一个负的延迟后，动画会提前运动到未来位置。

比如这里想指定到未来第7帧的位置，就可以延迟负的总运动时长的 7/ 10 ，实现如下

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

这样就不会影响原有的动画了，完美实现

完整代码可以访问：Ant Design Logo (codepen.io)

https://codepen.io/xboxyan/pen/LYOPoxz

附上完整代码（最近codepen貌似不太稳定）

.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%;
  }
}

五、总结和说明

上面就是针对 Ant Design 官网 Logo 效果的 CSS 实现，代码量非常少，而且也避免了 js 未加载完成时的问题，体验更好，下面简单总结一下

• CSS 渲染是及时的，只要页面可见，就不会影响 CSS 交互

• 逐帧动画可以通过 CSS 动画 中的 step() 函数实现

• CSS 动画可以自动运行，也可以手动暂停

• 通过设置负的延时，可以让 CSS 动画提前运行

当然，CSS 的优点还不只这些，打开 Ant Design 控制台，让我有点崩溃的是，居然是不断更换svg链接实现的，如果一直放在 Logo 上就会源源不断的请求图片，小图标也会出现“闪烁”的情况

这个请求量就有点惊人了。如果有负责 Ant Design 官网的小伙伴看到这里，是不是可以优化一下呢？

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit reinem CSS den Logo-Easter-Egg-Effekt von AntDesign imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!