So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen

Vorne geschrieben

Ich weiß nicht, wer als Erster entdeckt hat, dass Filter:Blur und Filter:Contrast eine so wunderbare chemische Reaktion erzeugen können, aber das ist auch egal. Wichtig ist, dass Sie Ihren Webseiten coole Effekte hinzufügen können, wenn Sie lernen, wie Sie diesen Spezialeffekt nutzen! Dann schauen Sie sich bitte zwei kleine Demos an

Demo

Wie geht das?

Wenn Sie genau hinsehen, scheinen die Elemente auf der Webseite eine gewisse Viskosität zu haben. Wenn die Elemente nahe genug beieinander sind, tritt ein Fusionseffekt auf. Wenn die Elemente weit voneinander entfernt sind, tritt ein klebriger Effekt auf. Wie wird das erreicht?

Es ist ganz einfach. Sie müssen lediglich filter:blur zum untergeordneten Element hinzufügen und den Kontrast des übergeordneten Elements erhöhen.

Sie sehen folgendermaßen aus (eine einfachere Demo wird unten gezeigt):

Codeteil:

 <div Klasse="Wrapper">
        <div Klasse="Container">
            <div Klasse="Box"></div>
        </div>
       </div>

 .Verpackung{
            Breite: 100 %;
            Höhe: 100vh;
            Position: absolut;
            Hintergrundfarbe: #333;
            Filter:Kontrast(50)
        }
        .container {
            Position: absolut;
            oben: 50 %;
            links: 50 %;
            Breite: 200px;
            Höhe: 100px;
            Hintergrundfarbe: #00eeff;
            Filter: Unschärfe (10px);
        } 
        .Kasten{
            Breite: 25px;
            Höhe: 25px;
            Hintergrundfarbe: #00eeff;
            Randradius: 50 %;
            Position: absolut;
            links: 50 %;
            Übergang: 1s;
            Filter: Unschärfe (1px);
            Animation: Bewegung 1 s linear unendlich;
         }
   @keyframes verschieben {
       0 %{
           transformieren: übersetzenY(0);
       }
       100 %{
           transformieren: übersetzenY(-100px);
       }
   }

Sie können den Code jederzeit kopieren und selbst ausprobieren!

Prinzip:

Wenn alle Elemente das Unschärfeattribut haben, ist das obere Element das übergeordnete Element ohne Kontrast (im Folgenden als Abbildung 1 bezeichnet) und das untere Element das übergeordnete Element mit Kontrast (im Folgenden als Abbildung 2 bezeichnet). Haben Sie beim Zusammenführen der Elemente festgestellt, dass Abbildung 1 auch einen Fusionseffekt aufweist? Es ist einfach nicht klar, was die Unschärfe verursacht. Das Kontrastattribut kann die Unschärfe wirksam bekämpfen und den in Abbildung 2 gezeigten Effekt erzielen.

Siehe Abbildung unten

Dies ist das Ende dieses Artikels über den Versuch, Ihrem CSS einen Sticky-Effekt hinzuzufügen. Weitere relevante CSS-Sticky-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!