Es ist sehr einfach, interessante Bilder zu implementieren, wenn Elemente schweben, wie z. B. sich bewegende Elemente. Aber wenn es mehrere Listenelemente gibt und Sie m?chten, dass die Bewegung jedes Listenelements eine Interlaced -Animationszeit hat, wie k?nnen Sie dies erreichen?

Der folgende Code zeigt, wie durch das transition-delay -Attribut ein verschachtelten Animationseffekt erzielt werden kann. Zun?chst w?hlen wir jedes Listenelement aus und wenden eine andere Verz?gerungszeit an:

 @media (Hover: Hover) {
  .List li a span {
    Transformation: Translatey (100px);
    übergang: 0,2s;
  }
  .List: Hover Span {
    Transformation: Translatey (0);
  }
  .List li: n-Kind (1) span {
    übergangsdelay: 0s;
  }
  .List li: n-Kind (2) span {
    übergangsdelay: 0,05s;
  }
  .List li: n-Kind (3) span {
    übergangsdelay: 0,1s;
  }
  .List li: n-Kind (4) span {
    übergangsdelay: 0,15s;
  }
  .List li: n-Kind (5) span {
    übergangsdelay: 0,2s;
  }
  .List li: n-Kind (6) span {
    übergangsdelay: 0,25s;
  }
}

Für eine flexiblere Kontrolle der Latenz k?nnen Sie CSS verwenden, um Eigenschaften anzupassen:

 @media (Hover: Hover) {
  .List {
    -Delay: 0,05s;
  }
  .List li a span {
    Transformation: Translatey (100px);
    übergang: 0,2s;
  }
  .List: Hover Span {
    Transformation: Translatey (0);
  }
  .List li: n-Kind (n) span {
    übergangsdelay: Calc (var (-Verz?gerung) * (n-1));
  }
}

Diese Methode verwendet die Funktion calc() um die Verz?gerungszeit dynamisch zu berechnen, wodurch der Code einfacher und einfacher zu skalieren ist. n repr?sentiert die Sequenznummer des Listenelements.

Wenn die Listenelemente gro? sind, erscheinen die oben genannten Methoden m?glicherweise überflüssig. Sie k?nnen die SASS -Schleife verwenden, um Code zu generieren:

 @media (Hover: Hover) {
  .List li a span {
    Transformation: Translatey (100px);
    übergang: 0,2s;
  }
  .List: Hover Span {
    Transformation: Translatey (0);
  }
  @Für $ i von 0 bis 20 {
    .List li: nthchild (http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5Fe05c70e15b {$ i 1}) span {
      übergangsdelay: 0,05s * $ i;
    }
  }
}

Dieser SASS-Code schmeckt zum Generieren von transition-delay Attributen von 21 Listenelementen. Selbst wenn es weniger als 21 Listenelemente gibt, wird der überschüssige Code nach der Gzip -Komprimierung effektiv reduziert.

Schlie?lich k?nnen Sie auch den Verz?gerungswert von HTML übergeben:

• Das
• Wenig

@media (Hover: Hover) {
  .List li a span {
    Transformation: Translatey (100px);
    übergang: 0,2s;
  }
  .List: Hover Span {
    Transformation: Translatey (0);
    übergangsdelay: var (-Verz?gerung); /* Verz?gerungswert von html*/erhalten
  }
}

Welche Methode zu w?hlen, h?ngt von den spezifischen Anforderungen des Projekts und der pers?nlichen Vorlieben ab. Die SASS -Schleifenmethode hat Vorteile in Bezug auf Wartbarkeit und Skalierbarkeit, w?hrend die benutzerdefinierte Attributmethode pr?gnanter und flexibler ist. Es ist auch zweckm??ig, direkt in HTML festzulegen, ist jedoch m?glicherweise nicht sehr bequem für die Wartung.

Das obige ist der detaillierte Inhalt vonGestaffelte CSS -überg?nge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!