Vor ein paar Tagen habe ich auf Codepen ein Beispiel von @Kyle Wetton gesehen, bei dem CSS-Mischmodi und SVG verwendet wurden, um die Farbe des Sofas zu ändern. Ein sehr interessanter Fall. Dies erinnert mich an die Anwendung in einigen tatsächlichen Geschäftsszenarien. Beispielsweise gibt es ähnliche Szenarien in einigen Beauty-Anwendungen. Möchten Sie mehr darüber erfahren, wie Sie diesen Effekt erzielen? Wenn ja, dann lesen Sie bitte weiter. Verwenden von CSS-Mischmodi und SVG zum Ändern der Farbe des Sofas Die folgende Demo stammt von einem Effekt, der von @Kyle Wetton auf Codepen geschrieben wurde: Versuchen Sie, die Farbe zu ändern, und Sie werden verschiedene Sofafarben sehen: Ist das nicht interessant? Tatsächlich gibt es in tatsächlichen Szenen einige ähnliche Effekte, beispielsweise bei einigen Schönheitsanwendungen: Wenn Sie das Umsetzungsprinzip oder die Wirkung erfahren möchten, lesen Sie bitte weiter. Grundkenntnisse, die Sie benötigen Wenn Sie die Effekte der oben genannten Beispiele erfolgreich umsetzen möchten, müssen Sie über ein wenig Grundwissen verfügen. Beispielsweise CSS-Mischmodus, SVG und so weiter. Mithilfe verschiedener Eigenschaftswerte von CSS-Blend-Modi können wir die Wirkung eines Bildes ganz einfach ändern: Der CSS-Mischmodus kann auch viele andere Effekte erzielen, auf die hier nicht näher eingegangen wird. Darüber hinaus müssen Sie über Kenntnisse im Ausschneiden von Bildern verfügen. Ich denke aber, dass das für das Frontend kein Problem sein sollte. So lässt sich das Sofa neu beziehen Lassen Sie uns dies als Nächstes in die Praxis umsetzen und zuerst den Fall von @Kyle Wetton analysieren. Dieses Beispiel ist sehr einfach. Das HTML besteht aus drei Teilen:
Lassen Sie uns diesen SVG-Code kurz analysieren. <svg id="js-couch" class="couch__overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="keine" width="1000" height="394"> <Definitionen> <Pfad d="M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2 Zusammenfassen Oben habe ich Ihnen die Verwendung von CSS-Mischmodi und SVG zur dynamischen Änderung der Farbe von Produktbildern vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So legen Sie den Rahmen einer Webseitentabelle fest
>>: Hintergrundbild-Cache unter IE6
Als ich kürzlich kazam in Ubuntu 20.04 zur Aufzei...
Beim Installieren einer virtuellen Maschine wird ...
1. Rahmen In einem Browser-Dokumentfenster kann n...
1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...
Vorwort Kürzlich habe ich festgestellt, dass die ...
Inhaltsverzeichnis Vorwort Frage Prinzip prüfen V...
Inhaltsverzeichnis Vorbereitung Installieren Sie ...
Schritt Platzieren Sie die vorbereiteten statisch...
Ich habe online nach vielen Möglichkeiten gesucht...
1. Warum verwendet Nginx gzip? 1. Die Rolle der K...
Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...
Das Pre-Element definiert vorformatierten Text. In...
Inhaltsverzeichnis 1. Einleitung 2. Grundsatz Pra...
Wir können den Installationspfad von MySQL über d...
Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...