CSS zum Erzielen des klebrigen Effekts von zwei sich kreuzenden Bällen – Beispielcode

Dies ist ein Effekt, der ausschließlich mit CSS erstellt wird. Um es ganz klar auszudrücken: Dieser Effekt basiert auf dem Prinzip der Bildverarbeitung. Die Methode ist fast genau dieselbe wie in Photoshop, außer dass die eine mithilfe von Ebenen und Farbpaletten erstellt wird, während die andere mithilfe von CSS erstellt wird (denken Sie einfach an Divs als Ebenen).

Erste Schritte mit PhotoShop

Beginnen wir damit, mit Photoshop herumzuspielen. Das ist einfacher zu verstehen, als direkt CSS zu schreiben (es macht nichts, wenn Sie Photoshop nicht haben, Sie werden es verstehen, nachdem Sie die Anweisungen gelesen haben). Zuerst fügen wir zwei neue Ebenen hinzu, legen in eine eine kleine rote Kugel und in die andere eine große schwarze Kugel.

Als nächstes verwenden wir den Gaußschen Weichzeichnerfilter, um den kleinen roten Ball bzw. den großen schwarzen Ball zu verwischen.

Als Nächstes fügen wir eine neue Einstellungsebene „Helligkeit und Kontrast“ hinzu, aktivieren „Alte Version verwenden“ und erhöhen dann den Kontrastwert. Sie werden ein magisches Phänomen sehen.

Nachdem Sie gezogen haben, bis die Kante nicht mehr verschwommen ist, können Sie versuchen, den roten Ball mit der Maus zu bewegen. Sie werden feststellen, dass die Verbindung zwischen dem roten und dem schwarzen Ball zu einem Zentrum mit klebrigem Effekt wird. Dies ist der Effekt, den wir erzielen möchten!

Genau so, Sie wissen bereits, wie Sie Photoshop verwenden, um es zu erstellen. In ähnlicher Weise verwendet CSS die gleiche Methode, außer dass die Ebene durch div ersetzt wird. So einfach ist das.

CSS-Effekte

Zuerst füge ich ein Div mit der Klasse „redball“ als roten Ball und ein Div mit der Klasse „blackball“ als schwarzen Ball in das HTML ein. Das sind die beiden Ebenen in Photoshop. Dann füge ich ein Div mit der Klasse „effect“ auf die äußerste Ebene ein. Das ist unsere Anpassungsebene. Wenn Sie fertig sind, sollte der HTML-Code folgendermaßen aussehen:

<div Klasse="Effekt">
  <div Klasse="schwarzer Ball"></div>
  <div Klasse="roter Ball"></div>
</div>

Solange Sie einen Weichzeichnerfilter zu Blackball und Redball und einen Kontrastfilter zu Effekt hinzufügen, können Sie die Spezialeffekte in Photoshop erzielen. Der Weichzeichnerfilter muss filter:blur (numerischer Wert) verwenden, und der Kontrastfilter muss filter:contrast (numerischer Wert) verwenden.

Das CSS sieht folgendermaßen aus:

.Wirkung{
  Breite: 100 %;
  Höhe: 100 %;
  Polsterung oben: 50px;
  Filter: Kontrast (10);
  Hintergrund:#fff;
}
.schwarzer Ball{
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: schwarz;
  Polsterung: 10px;
  Randradius: 50 %;
  Rand: 0 automatisch;
  z-Index: 1;
  Filter: Unschärfe (5px);
}
.redball{
  Breite: 60px;
  Höhe: 60px;
  Hintergrund: #f00;
  Polsterung: 10px;
  Randradius: 50 %;
  Position: absolut;
  oben: 70px;
  links: 50px;
  z-Index: 2;
  Filter: Weichzeichnen (5px);
  Animation: Rball 6s unendlich;
}

Ignorieren Sie die Positionierungswerte in CSS, setzen Sie den Unschärfewert auf 5px und den Kontrastwert auf 10, und Sie können sehen, dass die roten und schwarzen Bälle zusammenkleben. Aber wie bringen wir sie dazu, sich zu bewegen? Sie müssen CSS3-Animationen verwenden. Das Animationsverfahren ist wie folgt:

@keyframes rball{
  0 %, 100 % {
    links: 35px;
    Breite: 60px;
    Höhe: 60px;
  }
  4 %, 54 % {
    Breite: 60px;
    Höhe: 60px;
  }
  10 %, 60 % {
    Breite: 50px;
    Höhe: 70px;
  }
  20 %, 70 % {
    Breite: 60px;
    Höhe: 60px;
  }
  34 %, 90 % {
    Breite: 70px;
    Höhe: 50px;
  }
  41 %
    Breite: 60px;
    Höhe: 60px;
  }
  50 %{
    links: berechnen (100 % – 95 Pixel);
    Breite: 60px;
    Höhe: 60px;
  }
}

Hier sind viele Keyframes geschrieben, denn wenn der rote Ball in den schwarzen Ball eintritt, wird er horizontal komprimiert und wenn er den schwarzen Ball verlässt, wird er horizontal gestreckt. Auf diese Weise fühlt er sich klebriger an. Ich habe viel Mühe darauf verwendet, diesen Effekt zu testen! (Hier ist jedoch eines zu beachten. Da die Position automatisch berechnet wird, denken Sie beim Testen daran, die Breite des äußersten Effekts auf 320 Pixel einzustellen.)

Nachdem Sie den roten Ball fertiggestellt haben, müssen Sie die beiden blauen Bälle zusammenführen und dann trennen. Dabei gilt das gleiche Prinzip. Das CSS der beiden blauen Bälle ist unten aufgeführt. Sie müssen darauf achten, dass ich die blauen Bälle nach dem Zusammenführen größer gemacht habe und sie auch beim Trennen länger werden.

.blueball1{
  Breite: 80px;
  Höhe: 80px;
  Hintergrund: #00f;
  Polsterung: 10px;
  Randradius: 50 %;
  Position: absolut;
  oben: 230px;
  links: 0;
  z-Index: 2;
  Filter: Weichzeichnen (8px);
  Animation:bball1 6s unendlich;
}
.blueball2{
  Breite: 80px;
  Höhe: 80px;
  Hintergrund: #00f;
  Polsterung: 10px;
  Randradius: 50 %;
  Position: absolut;
  oben: 230px;
  links: 240px;
  z-Index: 2;
  Filter: Weichzeichnen (8px);
  Animation:bball2 6s unendlich;
}
@keyframes bball1{
  0 %, 100 % {
    links: 0;
    oben: 230px;
    Breite: 80px;
    Höhe: 80px;
  }
  20 %
    oben: 230px;
    Breite: 80px;
    Höhe: 80px;
  }
  85 %
    oben: 230px;
    links: 75px;
    Breite: 90px;
    Höhe: 70px;
  }
  90 %
    oben: 228px;
    Breite: 75px;
    Höhe: 85px;
  }
  50 %{
    oben: 215px;
    links: 110px;
    Breite: 110px;
    Höhe: 110px;
  }
}
@keyframes bball2{
  0 %, 100 % {
    links: 240px;
    oben: 230px;
    Breite: 80px;
    Höhe: 80px;
  }
  20 %
    oben: 230px;
    Breite: 80px;
    Höhe: 80px;
  }
  85 %
    oben: 230px;
    links: 165px;
    Breite: 90px;
    Höhe: 70px;
  }
  90 %
    oben: 228px;
    Breite: 75px;
    Höhe: 85px;
  }
  50 %{
    links: 110px;
    oben: 215px;
    Breite: 110px;
    Höhe: 110px;
  }
}

So einfach lässt sich ein Sticky-Effekt erzielen, indem man einfach CSS verwendet. Ehrlich gesagt bin ich mir nicht ganz sicher, wo dieser Effekt eingesetzt werden kann, aber wenn er in der Unterwasserwelt oder bei einigen Spezialeffekten zum Laden verwendet wird, sollte er ziemlich gut sein!

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.