Wie erreicht man einen reibungslosen Farbübergang einer konischen Verlaufsanimation?
P粉285587590
P粉285587590 2023-09-01 16:37:22
0
1
414

Ich animiere einen spitz zulaufenden Farbverlauf, aber der Farbwechsel ist nicht sanft genug Ich habe mir verschiedene Artikel angesehen, kann sie aber nicht richtig wiedergeben Meinen Code finden Sie hier:

 
  

So lassen sich die Änderungen reibungsloser gestalten

P粉285587590
P粉285587590

Antworte allen (1)
P粉605233764

背景图像在您想要的方式中无法平滑地进行动画处理。

然而,您可以平滑地动画化不透明度,因此一种获得效果的方法是将两个背景图像放在彼此上方,并改变它们的不透明度,使它们逐渐从一个变为另一个。

在您的情况下,您可以将背景图像放在伪元素的before和after上,而不是放在元素本身上。

它们具有相同的动画效果,但一个从中间开始(当不透明度为1时)。

当总持续时间只有1秒时,很难意识到这种混合效果,因此此代码片段增加了持续时间,以便您可以看到效果。

当然,您可以根据需要更改时序。

更改还是线性的,以便覆盖始终提供“整体”图像而不是半透明图像。

 
  
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!