Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt-CSS-Tutorial-php.cn

Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt

不言

Freigeben： 2018-09-12 14:24:25

Original

4851 Leute haben es durchsucht

Manchmal sehen wir einen solchen Effekt auf einer Webseite, wenn die Maus auf bestimmte Texte oder Bilder gesetzt wird. Dies ist also ein relativ abstrakter Vorgang passiert. Lassen Sie uns den Animationseffekt des css3-Übergangs vorstellen.

Der CSS3-Übergang ist untrennbar mit dem Übergangsattribut verbunden. Der allmähliche Übergangseffekt von Änderungen wird als Übergangsanimation bezeichnet.

Dann werfen wir einen Blick darauf, wie das Übergangsattribut von CSS3 den Übergangseffekt konkret implementiert.

Werfen wir zunächst einen Blick auf die Definition und Verwendung des Übergangsattributs:

Das Übergangsattribut ist ein Kurzattribut, das zum Festlegen von vier Übergangsattributen verwendet wird .

transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt.

Übergangsdauer: Gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.

transition-timing-function: Gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.

Übergangsverzögerung: Definiert, wann der Übergangseffekt beginnt.

Nachdem Sie die kurze Einführung in die Definition und Verwendung des Übergangsattributs gelesen haben.

Jetzt werfen wir einen Blick auf einen CSS3-Code, der den Übergangseffekt implementiert:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置浏览器默认的两个值，
        对本文没有太大影响，不知道可以无视*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "华文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*变化的东西。all是所有*/
    transition-duration: 1s;/*变化过程的时间*/
    transition-timing-function: linear;/*linear是匀速变化*/
    transition-delay: 0s;/*没有延迟变化*/
    /*下面的是简写属性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>PHP中文网火焰字</div>
</body>
</html>

Nach dem Login kopieren

Schließlich werfen wir einen Blick auf den CSS3-Übergangseffekt:

CSS3-Übergangseffektprozess:

Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt

CSS3-Übergangseffektergebnis:

Wie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt

Über die Übergangsattribut Weitere Informationen zur Verwendung finden Sie im CSS3-Lernhandbuch.

Verwandte Empfehlungen:

3D-Bildübergangseffekte implementiert mit CSS3-Animation_html/css_WEB-ITnose

Über CSS3 Verwenden Sie den Übergang Attribut, um Übergangseffekte zu erzielen

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Übergangsanimationseffekt in CSS3? So implementieren Sie den CSS3-Übergangseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!