Erstellen von richtungslich beleuchteten 3D -Tasten mit CSS-CSS-Tutorial-php.cn

Erstellen von richtungslich beleuchteten 3D -Tasten mit CSS

Ich bin mir nicht sicher, wie ich in diesen gestolpert bin. Aber etwas führte mich zu diesem Tweet:

Hat jemand diese Richtungsbeleuchtungs -Cursor -Wechselwirkung mit CSS gemacht? pic.twitter.com/zll7sk6kw5
- Jed Bridges (@jedBridges) 1. Juli 2020

Und für mich ist das eine Herausforderung.

Das Button -Design ist ordentlich. Aber ich wollte keine direkte Kopie machen. Stattdessen haben wir beschlossen, eine Twitter -Taste zu erstellen. Die Idee ist, dass wir eine fast transparente Taste mit einem sozialen Symbol erstellen. Und dann wirft diese soziale Ikone einen Schatten unten. Wenn Sie unsere Maus über den Knopf bewegen, wird ein Licht darüber erscheint. Durch Drücken der Taste wird auf die Oberfläche gedrückt. Hier ist das Endergebnis:

Richtungsbeleuchtung 3D -CSS -Twitter -Taste?

? https://t.co/qpfzewumey über @Codepen pic.twitter.com/zwfwtpaixo
- Jhey? (@jh3yy) 30. Januar 2021

In diesem Artikel werden wir uns ansehen, wie Sie es auch schaffen können. Das Coole ist, dass Sie das Symbol gegen alles austauschen können, was Sie wollen.

Key Takeaways

Verwenden Sie CSS und HTML, um eine 3D -Taste mit dynamischen Beleuchtungseffekten zu erstellen, die auf Cursorbewegungen reagieren und die Benutzerinteraktion verbessern.
Implementieren Sie PUG, um SVG -Symbole für Schaltflächen effizient zu generieren, wodurch einfache Swaps und Einstellungen an verschiedene Symbole mit Mixins ermöglicht werden.
Erreichen Sie einen 3D-visuellen Effekt durch Manipulation von CSS-Eigenschaften wie `Transform-Stil: Preserve-3D;` und Verwenden von Variablen zur Steuerung der Tiefe und Perspektive.
Verbesserung der Zugänglichkeit durch Verwendung von `aria-versteckten Attributen und Sicherstellen, dass interaktive Elemente über Bildschirmleser wahrgenommen werden können.
Wenden Sie CSS -Übergänge und -Transformationen an, um physische Interaktionen wie das Drücken der Taste und das Hinzufügen von Realismus zur Benutzererfahrung zu simulieren.
Verwenden Sie JavaScript für dynamische Effekte, z.

Das Markup

Mein First-Take-Ansatz, um so etwas zu erstellen, ist das Gerüst des Markups. Bei der ersten Inspektion müssen wir das verwendete soziale Symbol duplizieren. Und eine nette Möglichkeit, dies zu tun, besteht darin, Mops und Hebel -Mixins zu verwenden:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Hier haben wir ein Mixin erstellt, um ein SVG des Twitter -Symbols zu rendern. Dies würde das Twitter -Symbol machen, wenn wir es so aufrufen:

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

Wenn wir dies tun, gibt wir ein großes Twitter -Symbol.

Siehe den Stift 1. Rendern Sie ein Symbol von sitepoint (@sinepoint) auf Codepen.

Da soziale Symbolsätze in der Regel dieselbe "0 0 24 24" -Ansichtschachtel verwenden, können wir die Titel- und Pfadargumente vornehmen:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Dann wird unser Twitter -Symbol

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

Aber wir könnten ihm einen Schlüssel übergeben - und dann die Pfade in einem Objekt speichern lassen, wenn wir viele Symbole haben, die wir verwenden oder wiederholen wollten:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Nach dem Login kopieren

Dies kann eine nette Möglichkeit sein, ein Symbolmixin zur Wiederverwendung zu erstellen. Es ist ein wenig übertrieben für unser Beispiel, aber erwähnenswert.

Jetzt brauchen wir etwas Markup für unsere Taste.

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Nach dem Login kopieren

Es ist immer gut, sich der Zugänglichkeit zu bewusst. Wir können überprüfen, was unsere Schaltfläche abgibt, indem wir die -Anisgräber in den Entwickler -Tools Ihres Browsers überprüfen.

Erstellen von richtungslich beleuchteten 3D -Tasten mit CSS

Es könnte eine gute Idee sein, einen Spannweite für unseren Schaltflächentext einzulegen und die Symbole mit Aria-versteckt zu verbergen. Wir können auch den SPAN -Text ausblenden und gleichzeitig den Bildschirmlesern zur Verfügung stellen:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

Nach dem Login kopieren

Wir haben verschiedene Optionen für die Anwendung dieser aria-versteckten Attribute. Das, das wir verwenden werden, ist das Ändern des Mixin-Codes, um Aria-versteckt anzuwenden:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Nach dem Login kopieren

Ein weiterer ordentlicher Weg mit Mops besteht darin, alle Attribute an ein Mixin zu durchlaufen. Dies ist nützlich in Szenarien, in denen wir nur einige Attribute übergeben möchten:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span>span<span>.button__text</span> Twitter
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Nach dem Login kopieren

Wenn wir das Panel Barrierefreiheit erneut überprüfen, lautet unsere Schaltfläche nur "Twitter". Und das wollen wir!

Die Stile

Hier ist der Teil, für den Sie gekommen sind - wie wir das Ding stylen. Zu Beginn haben wir dies in:

fallen gelassen

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

Nach dem Login kopieren

, mit dem wir die 3D -Transformationen erstellen können, die wir für unsere Schaltfläche benötigen. Versuchen Sie, dies in der letzten Demo auszuschalten, und Sie werden sehen, dass alles bricht.

Lassen Sie uns den Spannungstext vor unseren Augen verbergen. Wir können dies auf viele Arten tun. Eine empfohlene Möglichkeit, ein Element vor unseren Augen zu verbergen, aber nicht die des Screenreaders, besteht darin, diese Stile zu verwenden:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

Nach dem Login kopieren

Bevor wir an unserem Button arbeiten, werden wir die Szene neigen. Wir können dies mit einer Transformation tun. Hier ketten wir die Transformation, um sie in die gewünschte Position zu bringen. Ich habe ein bisschen Zeit damit verbracht, hier im Live -Stream an Werten zu basteln, um es dem Original nahe zu bringen:

<span>* {
</span>  <span>transform-style: preserve-3d;
</span><span>}
</span>

Nach dem Login kopieren

Sie werden dort auch eine Größenvariable bemerken. Wir werden bestimmte Dinge für unseren Knopf mit CSS -Variablen fahren. Dies wird es zum Basteln an Werten und den Effekt machen. Normalerweise haben wir diese unter den Umfang, in dem sie benötigt werden, untergebracht. Für Demos wie diese wird es uns jedoch leichter für uns, sie unter die: Root oben in unserer Datei zu spielen, mit.

<span><span>.button__text</span> {
</span>  <span>position: absolute;
</span>  <span>width: 1px;
</span>  <span>height: 1px;
</span>  <span>padding: 0;
</span>  <span>margin: -1px;
</span>  <span>overflow: hidden;
</span>  <span>clip: rect(0, 0, 0, 0);
</span>  <span>white-space: nowrap;
</span>  <span>border-width: 0;
</span><span>}
</span>

Nach dem Login kopieren

Dies sind die Variablen, mit denen wir arbeiten, und sie werden beim Aufbau unserer Taste Sinn machen.

Die Taste

Lassen Sie uns mit dem Knopf übergehen! Das Tastenelement wird das Szenenelement füllen. Wir hätten die Größe anwenden und direkt auf dem Taste verwandelt können. Aber wenn wir andere Tasten und Elemente vorstellen würden, müssten wir sie alle verwandeln und griffen. Dies ist etwas, auf das sich CSS im Allgemeinen bewusst werden muss. Versuchen Sie, Ihre Containerelemente das Layout zu diktieren:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Hier ziehen wir die Button -Stile. Und das gibt uns das.

Siehe den Stift 9. Strip -Taste -Stile von SitePoint (@sinepoint) auf Codepen.

Als nächstes müssen wir einen gemeinsamen Ausgangspunkt für den Button -Inhalt und den Schatten erstellen. Wir können dies tun, indem wir jedem Element eine absolute Positionierung geben. In dem Inhalt wird eine 3D basierend auf der zuvor definierten Tiefenvariable übersetzt:

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

Beachten Sie, wie wir auch die Variable -radius verwenden.

Siehe den Stift 10. Geben Sie die Tiefe von SitePoint (@sinepoint) an. auf Codepen.

Es ist schwer, zwischen den beiden Ikonen in dieser Phase zu unterscheiden. Und jetzt ist ein guter Zeitpunkt, um sie zu stylen. Wir können ein grundlegendes Symbolstyling anwenden und für jedes SVG -Symbol eine Scoped -Füllung verwenden:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Nach dem Login kopieren

es kommt dort an! Die Symbole haben momentan nicht die gleiche Größe. Wir werden dazu kommen.

Siehe den Stift 11. Wenden Sie Scoped Fill von sitepoint (@sinepoint) an auf Codepen.

Lassen Sie uns die Taste drücken. Dieser Teil ist sehr schnell integriert:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Nach dem Login kopieren

Das ist es! Mithilfe von Scoped CSS-Variablen sagen wir, entfernen Sie die Z-Achse-Übersetzung auf: aktiv. Das Hinzufügen des Übergangs zur Transformation verhindern, dass es so sofort ist.

Siehe den Stift 12. Drücken Sie auf: aktiv von sitepoint (@sinepoint) auf Codepen.

Alles, was noch zu tun ist, ist die Schaltflächenschichten und den Glanz zu stylen. Beginnen wir mit dem Schatten:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Ein weiterer Scoped -Stil hier. Wir sagen, wenn wir den Taste drücken, ist der Schatten nicht mehr verschwommen. Und um den Schatten zu verwischen, verwenden wir die CSS -Filtereigenschaft mit einem Unschärfenfilter - dessen Wert wir in unseren CSS -Variablen definiert haben. Spielen Sie ein Stück mit der Variablen -Blur und sehen Sie, was passiert.

Siehe den Stift 13. Unschärfe bei Schwebede durch SitePoint (@sinepoint) reduzieren auf Codepen.

Für die Inhaltsschicht verwenden wir eine Hintergrundfarbe und wenden dann einen Hintergrundfilter an. Ähnlich wie Filter ist Backdrop-Filter eine Möglichkeit für uns, visuelle Effekte auf Elemente anzuwenden. Ein allgemeiner Anwendungsfall ist derzeit die Verwendung von Blur für „Glassmorphism“:

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

Wir verwenden den Wert von-Blur und wenden einen Übergang für Backdrop-Filter an. Aufgrund der Art und Weise, wie wir unsere -Blur -Variable auf: Aktiv gemacht haben, erhalten wir den Übergang fast kostenlos. Warum der Überlauf: versteckt? Wir erwarten dieses Glanzelement, das sich um den Knopf bewegen wird. Wir wollen jedoch nicht, dass es draußen abfließt.

Siehe den Stift 14. Styling Content Layer von SitePoint (@sinepoint) auf Codepen.

Und jetzt das letzte Stück des Puzzles - dieses Licht scheint. Dies hat dazu geführt, dass die Symbole eine andere Größe haben. Da es keine Stile hat, wirkt sich das Layout aus. Geben wir ihm einige Stile:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Nach dem Login kopieren

Diese absolute Positionierung sortiert die Icon -Größenisation aus. Wenn Sie einen Grenzradius auftragen, rundet das Rampenlicht. Und wir verwenden den Filter erneut, um den verschwommenen Flecken -Licht -Effekt zu verleihen. Sie werden feststellen, dass wir am Ende einen Helligkeitsfilter dort gekettet haben, um die Dinge ein wenig aufzuhellen, nachdem sie verschwommen sind.

Siehe den Stift 15. Styling Shine von SitePoint (@sinepoint) auf Codepen.

Verwenden der 3D -Übersetzung stellt sicher, dass der Glanz über der Taste liegt, was er tun würde. Auf diese Weise besteht keine Chance, dass es durch Z-Kämpfe mit anderen Elementen geschnitten wird.

Das ist alles, was wir für die Stile brauchen. Jetzt ist es Zeit für einige Skripte.

script

Wir werden hier Greensock aus Gründen der Bequemlichkeit verwenden. Sie haben einige nette Dienstprogramme für das, was wir wollen. Wir könnten jedoch das gleiche Ergebnis mit Vanille -JavaScript erzielen. Da wir Skripte mit dem Typ "Modul" verwenden, können wir SkyPack nutzen.

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Und jetzt sind wir bereit, zu basteln. Wir möchten, dass unser Knopf auf Zeigerbewegungen reagiert. Das erste, was wir wollen, ist, den Glanz so zu übersetzen, als ob er unserem Zeiger folgt. Die zweite besteht darin, die Taste abhängig davon zu verschieben, wo sich unser Zeiger befindet.

Lassen Sie uns die Elemente schnappen, die wir benötigen, und einige grundlegende Ereignishörer auf dem Dokument einrichten:

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

Versuchen Sie, Ihren Zeiger in dieser Demo zu bewegen, um die Wertsachen zu sehen, die wir für x und y zurückkehren:

Siehe den Stift 16. Elemente greifen und Ereignishörer von SitePoint (@sitepoint) erstellen auf Codepen.

Dies ist das schwierigste Stück. Wir brauchen etwas Mathe, um die Position der Glanz zu erarbeiten. Wir werden den Glanz nach dem ersten Rücksetzen übersetzen. Wir müssen zuerst die Glanzstile aktualisieren, um dies aufzunehmen. Wir verwenden die Scoped CSS -Variablen --x und - -y. Wir geben ihnen einen Fallback von -150, sodass sie aus dem Schuss kommen werden, wenn die Demo lädt:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Nach dem Login kopieren

In unserer Aktualisierungsfunktion berechnen wir dann die neue Position für den Glanz. Wir stützen dies auf einen Prozentsatz der Knopfgröße. Wir können dies berechnen, indem wir die Knopfposition von unserer Zeigerposition subtrahieren. Dann teilen wir das durch die Position. Multiplizieren Sie mit 200, um einen Prozentsatz zu erhalten:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Nach dem Login kopieren

Zum Beispiel POS_X:

Zeigerposition x.
Subtrahieren der Taste Position x.
durch Taste Breite teilen.
multiplizieren Sie mit 200.

Wir multiplizieren mit 200, weil der Glanz halb so groß ist. Dieser besondere Teil ist schwierig, weil wir versuchen, den Zeiger zu verfolgen und ihn in 3D -Raum zuzuordnen.

Um dies auf die Taste anzuwenden, können wir diese CSS -Variablen mit GSAP.Set einstellen. Das ist eine GSAP -Methode, die als zweite Null -Tween funktioniert. Es ist besonders nützlich, um Werte auf Elementen festzulegen:

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

Nach dem Login kopieren

Aber wenn wir noch einen Schritt weiter gehen wollen, können wir einen QuickSetter von GSAP verwenden, was für die Leistung in realen Szenarien besser wäre, in denen wir viele Updates erstellen:

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

Nach dem Login kopieren

Das sieht unsere Aktualisierungsfunktion so aus:

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

Nach dem Login kopieren

Die Genauigkeit, dem Zeiger zu folgen, würde mehr Berechnungen benötigen, um genau zu sein. Spielen Sie ein Spiel mit dieser Demo, in der der Überlauf auf dem Knopf sichtbar ist und der Glanz deutlicher ist. Sie können sehen, wie das Shine -Element seine Verfolgung verliert.

Siehe den Stift 17. Übersetzen des Shine Playgrounds von sitepoint (@sinepoint) auf Codepen.

Diese Demo bringt alles dorthin, wo es sein sollte.

Siehe den Stift 18. Übersetzen des Glanzes von sitepoint (@sinepoint) auf Codepen.

Letzte Funktion. Lassen Sie uns die Taste für eine zusätzliche Note verschieben. Hier werden wir die Verschiebung der Schaltfläche auf die Zeigerposition stützen. Aber wir werden seine Bewegung einschränken. Dazu können wir ein anderes GSAP -Dienstprogramm verwenden. Wir werden MapRange verwenden. Dies ermöglicht es uns, einen Wertesatz einer anderen zuzuordnen. Wir können dann einen Wert eingeben und einen kartierten Wert zurückerhalten.

Erstens definieren wir eine Grenze für die Bewegung. Dies ist ein Prozentsatz der Knopfgröße:

<span><span>+icon()</span>
</span>

Nach dem Login kopieren

In unserer Aktualisierungsfunktion können wir jetzt den Prozentsatz der Verschiebung berechnen. Wir tun dies, indem wir die Fensterbreite an die Grenze abbilden. Und wir geben unsere Zeigerposition ein, um den kartierten Prozentsatz zurückzubekommen:

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

Nach dem Login kopieren

In diesem Block haben wir den Bereich von 0 auf Fenster abgebildet. . Wir tun dasselbe für vertikale Verschiebung, und dies gibt uns eine Aktualisierungsfunktion wie folgt:

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

Nach dem Login kopieren

Das ist es!

So erstellen Sie eine richtungsleuchte 3D -Taste mit CSS und ein wenig Skript. Das Coole ist, dass wir Änderungen mit relativer Leichtigkeit vornehmen können.

Für die endgültige Demo habe ich einige zusätzliche Details hinzugefügt und das Symbol geändert. Sie können es erkennen.

Siehe den Stift 20. SitePoint -Taste von sitepoint (@sinepoint) auf Codepen.

Wie immer, danke fürs Lesen. Willst du mehr sehen? Kommen Sie und finden Sie mich auf Twitter oder schauen Sie sich den Live -Stream an!

häufig gestellte Fragen zum Erstellen von richtungslich beleuchteten 3D -Tasten mit CSS

Wie kann ich eine 3D-Schaltfläche mit CSS erstellen, die sich beim Klicken ändert? Diese Pseudoklasse wird verwendet, um ein Element zu stylen, wenn sie vom Benutzer aktiviert wird. Zum Beispiel können Sie die Farbe, Größe oder Position der Schaltfläche ändern, wenn sie geklickt wird. Hier ist ein einfaches Beispiel:

.button: Active {
Hintergrundfarbe: #3E8E41;
box-shadow: 0 5px #666; >}
In diesem Beispiel ändert sich die Hintergrundfarbe der Schaltfläche beim Klicken in einen anderen Grünton. Die Box-Shadow-Eigenschaft fügt einen Schatteneffekt hinzu, und die Transformationseigenschaft bewegt die Schaltfläche leicht nach unten.

Wie kann ich meinem 3D Die 3D-Taste kann mit der: Hover Pseudo-Klasse in CSS erreicht werden. Diese Pseudoklasse wird verwendet, um ein Element zu stylen, wenn der Mauszeiger darüber hinweg ist. Sie können die Farbe, Größe oder einen Schatten zur Schaltfläche hinzufügen, wenn er überlastet ist. Hier ist ein einfaches Beispiel:

.button: hover {

Hintergrundfarbe: #3E8E41;

box-shadow: 0 5px #666; Die Hintergrundfarbe der Schaltfläche ändert sich in einem anderen grünen Farbton, wenn er überschritten wird, und es wird ein Schatteneffekt hinzugefügt.

Wie kann ich meine 3D -Taste reagieren? Abfragen in CSS. Mit Medienabfragen können Sie verschiedene Stile für verschiedene Geräte oder Bildschirmgrößen anwenden. Beispielsweise können Sie die Größe oder Position der Schaltfläche je nach Bildschirmgröße ändern. Hier ist ein einfaches Beispiel:

@media Bildschirm und (max-Width: 600px) {
.button {
Breite: 100%;
Polsterung: 20px;
} }

In diesem Beispiel wird die Breite der Taste auf 100% gesetzt und die Polsterung wird erhöht, wenn die Bildschirmgröße 600px oder weniger beträgt.

Wie kann ich meiner 3D -Taste einen Übergangseffekt hinzufügen? 🎜>

Hinzufügen eines Übergangseffekts zu Ihrer 3D -Taste kann mit der Übergangseigenschaft in CSS erreicht werden. Mit dieser Eigenschaft können Sie die Geschwindigkeit des Effekts angeben. Zum Beispiel können Sie die Farbänderung oder den Schatten nach und nach erscheinen lassen. Hier ist ein einfaches Beispiel:

.button {
Übergang: Hintergrund-Color 0,5S Leichter, Box-Shadow 0,5s Leichtigkeit;
}
In diesem Beispiel die Hintergrundfarbe und der Schatten sich über einen Zeitraum von 0,5 Sekunden allmählich ändern.

Wie kann ich eine 3D-Taste mit abgerundeten Ecken erstellen? Mit dieser Eigenschaft können Sie einem Element abgerundete Grenzen hinzufügen. Zum Beispiel können Sie die Ecken des Knopfes rund machen. Hier ist ein einfaches Beispiel:

.button {
Border-Radius: 12px; > Wie kann ich eine 3D-Taste mit einem Gradientenhintergrund erstellen? Mit dieser Funktion können Sie einen Gradienten erstellen, der zwischen zwei oder mehr Farben übergeht. Hier ist ein einfaches Beispiel:

.button {
Hintergrund: linear-Gradient (rechts, #ff7f00, #ff5500); Leichte orange Farbe zu einer dunkleren orangefarbenen Farbe.

Wie kann ich eine 3D-Taste mit einem Schatteneffekt erstellen? . Mit dieser Eigenschaft können Sie einem Element einen Schatten hinzufügen. Zum Beispiel können Sie der Schaltfläche einen Schatten hinzufügen, damit er 3D aussieht. Hier ist ein einfaches Beispiel:

.button {

box-shadow: 0 5px 15px rgba (0,0,0,0,3);
}
In diesem Beispiel hat die Schaltfläche eine Schatten, das 5px unterhalb der Taste ist und einen Unschärferadius von 15px hat. Die Farbe des Schattens ist ein halbtransparentes Schwarz.

Wie kann ich eine 3D-Taste mit einem Rand erstellen? Mit dieser Eigenschaft können Sie einem Element einen Rand hinzufügen. Zum Beispiel können Sie der Schaltfläche einen Rand hinzufügen, um ihn hervorzuheben. Hier ist ein einfaches Beispiel:

.button {

Grenze: 2PX Solid #ff5500;

}

In diesem Beispiel hat die Taste einen 2px festen Rand mit einer orangefarbenen Farbe.

Wie kann ich eine 3D -Schaltfläche mit Text im Inneren erstellen? Mit diesen Eigenschaften können Sie den Text in einem Element stylen. Zum Beispiel können Sie die Farbe, Größe oder Schriftart des Textes in der Schaltfläche ändern. Hier ist ein einfaches Beispiel:

.button {
Farbe: #fff;

Schriftgröße: 20px;

Schriftfamilie: Arial, sans-serif; > In diesem Beispiel ist der Text in der Schaltfläche weiß, hat eine Größe von 20px und verwendet die Arial -Schriftart

Wie kann ich eine 3D -Taste erstellen, die mit allen Browsern kompatibel ist? Mit diesen Präfixen können Sie neue CSS -Funktionen verwenden, bevor sie in allen Browsern vollständig unterstützt werden. Zum Beispiel können Sie das -Webkit -Präfix für Chrome und Safari, das -moz- Präfix für Firefox und das -ms -Präfix für Internet Explorer verwenden. Hier ist ein einfaches Beispiel:

.button {
-Webkit-Übergang: Hintergrund-Color 0,5S LEART, BOX-SHADOW 0,5S LEART;
-moz-transitiv , Box-Shadow 0,5s Leichtigkeit; 🎜>}
In diesem Beispiel ist der Übergangseffekt mit Chrome, Safari, Firefox und Internet Explorer kompatibel.

Das obige ist der detaillierte Inhalt vonErstellen von richtungslich beleuchteten 3D -Tasten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!