CSS3-Übergang zum Erreichen des unterstrichenen Beispielcodes

In diesem Artikel wird der Beispielcode für den CSS3-Übergang zum Erreichen einer Unterstreichung vorgestellt, der wie folgt mit Ihnen geteilt wird:

Schauen Sie sich hier unsere Demo an

Den Übergang verstehen

Dies ist ein neuer in CSS3 hinzugefügter Stil, mit dem sich Animationsübergänge erzielen lassen. Wird häufig verwendet, wenn ein Effekt zum Übergang von einem Stil zu einem anderen hinzugefügt wird.

Die Übergangseigenschaft

1. Übergang: Eine Kurzeigenschaft, die verwendet wird, um vier Übergangseigenschaften in einer Eigenschaft festzulegen.
2. Übergangseigenschaft: Gibt den Namen der CSS-Eigenschaft an, auf die der Übergang angewendet wird.
3. Übergangsdauer: Definiert, wie lange der Übergangseffekt dauert. Der Standardwert ist 0.
4. Übergangs-Timing-Funktion: Gibt die Zeitkurve des Übergangseffekts an. Der Standardwert ist „Ease“.
   1. linear: Gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht cubic-bezier(0,0,1,1))
   2. ease: Gibt einen Übergangseffekt an, der langsam beginnt, dann schneller wird und dann langsam endet (cubic-bezier(0.25,0.1,0.25,1))
   3. ease-in: Gibt einen Übergangseffekt an, der langsam beginnt (entspricht cubic-bezier(0.42,0,1,1))
   4. ease-out: Gibt einen Übergangseffekt an, der langsam endet (entspricht cubic-bezier(0,0,0.58,1))
   5. ease-in-out: Gibt einen Übergangseffekt an, der langsam beginnt und endet (entspricht cubic-bezier(0.42,0,0.58,1))
   6. cubic-bezier(n,n,n,n): Definieren Sie Ihre eigenen Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlen zwischen 0 und 1.
5. Übergangsverzögerung: Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

Übergang: Breite 1 s linear 2 s; /*Gekürztes Beispiel*/

/*Entspricht dem Folgenden*/
Übergangseigenschaft: Breite;
Übergangsdauer: 1s;
Übergangszeitfunktion: linear;
Übergangsverzögerung: 2s;

Transformieren von Attributen

• translate() verschiebt das Element von seiner aktuellen Position entsprechend der angegebenen linken (X-Achse) und oberen (Y-Achse) Position.
• rotate() Dreht ein Element im Uhrzeigersinn um eine bestimmte Gradzahl. Es sind auch negative Werte erlaubt, welche das Element gegen den Uhrzeigersinn drehen.
• scale() vergrößert oder verkleinert die Größe des Elements, abhängig von den Parametern width (x-Achse) und height (y-Achse):
• skew() enthält zwei Parameterwerte, die jeweils die Neigungswinkel der X- und Y-Achse darstellen. Wenn der zweite Parameter leer ist, ist der Standardwert 0. Ein negativer Parameter gibt eine Neigung in die entgegengesetzte Richtung an.
• matrix() Die Matrixmethode verfügt über sechs Parameter, darunter Funktionen zur Drehung, Skalierung, Verschiebung und Verzerrung.

Erzielen Sie den gewünschten Effekt

Natürlich werde ich den Code einfach hier posten und er enthält Kommentare zum leichteren Verständnis.

/*CSS-Code*/

h2{
    Position: relativ;
    Polsterung: 15px;
    Textausrichtung: zentriert;    
}
Taste{
    Breite: 100px;
    Höhe: 40px;
    Rahmenradius: 15px;
    Rand: keiner;
    Hintergrund: #188FF7;
    Farbe: #fff;
    Gliederung: keine;
    Cursor: Zeiger;
    Schriftstärke: fett;
}
Schaltfläche: schweben {
    Hintergrund: #188EA7;
}
.Container{
    Breite: 600px;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Elemente ausrichten: zentrieren;
    Rand: 0 automatisch;
    
}
.Linie{
    Position: absolut;
    links: 0;
    unten: 0;
    Höhe: 3px;
    Breite: 100 %;
    Übergang: Transformation 0,5 s;
    Hintergrund: #188EA7;
    Farbe: #188EA7;
    transformieren: scaleX(0);
    Z-Index: 1111;            
}

@keyframes changeColor1{
    aus{
        Farbe: #000;
    }
    Zu{
        Farbe: #188EA7;
    }
}
@keyframes changeColor2{
    aus{                
        Farbe: #188EA7;
    }
    Zu{
        Farbe: #000;
    }
}
<!--HTML-Code-->

<div Klasse="Container">
    <h2 id="Titel">
        Baidu Front-End-Akademie<i class="line" id="line"></i>
    </h2>
    <button id="change">Ändern</button>
</div>
//js-Teil des Codes (Funktion () {
    let btn = document.getElementById('ändern');
    let h2 = document.getElementById('Titel');
    let Zeile = document.getElementById('Zeile');
    lass count = 0;
    btn.onclick = Funktion () {
        wenn(Anzahl%2===0){
            Linie.Stil.Transform = "SkalaX(1)";
            h2.style.animation = "Farbe ändern1 1s";
            h2.style.color = "#188EA7";
            zählen++;
        }anders{
            Linie.Stil.Transform = "SkalaX(0)";
            h2.style.animation = "Farbe ändern2 1s";
            h2.style.color = "#000";
            zählen++;
        }
        
    }
})();

Zusammenfassen

Bisher haben wir diesen Effekt vollständig vorgestellt und auch die Übergangs- und Transformationseigenschaften in CSS3 kennengelernt. Natürlich sind zur Fertigstellung dieser Animation einige HTML- und CSS-Grundkenntnisse erforderlich.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.