[Zusammenfassung von Vomiting Blood] Über 20 praktische Front-End-Tools, fügen Sie sie Ihren Favoriten hinzu!

In diesem Artikel werden mehr als 20 praktische Front-End-Tools vorgestellt, mit denen Sie die Entwicklungseffizienz bei der Entwicklung von Projekten verbessern können. Ich hoffe, dass sie für alle hilfreich sind. 1. CSS-Layout-Generator Arten von Layouts, ändert willkürlich die Eigenschaften des Rasters, zeigt den Bildschirm in Echtzeit an und generiert entsprechenden Code. Natürlich gibt es ein Flex-Layout (aber es ist noch nicht perfekt). [Empfohlenes Lernen:

CSS-Video-Tutorial

]

2. Riju

Riju: https://riju.codes/

Riju ist eine Online-Code-Laufplattform, die 224 Sprachen erbt , keine Werbung, sehr zu empfehlen

3. Whirl

Whirl: https://whirl.netlify.app/

Whirl ist eine CSS-Animationsbibliothek, die sich von anderen Animationsbibliotheken unterscheidet Sammelt 108 Ladeanimationen, ist einfach und einzigartig, es lohnt sich zu lernen und alle Quellcodes sind ebenfalls verfügbar!

4. Pikaday

Pikaday: https://pikaday.com/

Pikaday ist eine Datumsauswahl, keine Abhängigkeiten, leichtgewichtig (5k), CSS-modular und der Stil ist auch sehr einfach Überraschenderweise hat es auf Github über 7.000 Sterne erhalten. Diese Website ist eine Sammlung verschiedener Tailwind-Komponenten, die von der Community bereitgestellt wurden . Es verfügt über mehr als 250 Open-Source-Komponenten und ist mit React, Vue und Angular kompatibel: https://pbeshai.github.io/tidy/

tidy.js ist eine JavaScript-Bibliothek zur Verarbeitung von Daten 70 Funktionen verschiedener Kategorien (Sortierung, Gruppierung, Mathematik, Sortieren usw.)

8. party.js

party.js: https://party.js.org/

party .js ist ziemlich interessant. Wenn Sie mit der Maus klicken, können Sie diese Effekte ganz einfach erzielen Hintergrundentfernung

baseline: https://baseline ist/tools/background-remover/

baseline ist eine kostenlose Tool-Website, die KI verwendet, um den Hintergrund von Bildern zu entfernen Senden Sie ein PNG-Bild mit einem transparenten Hintergrund an Sie zurück.

十, Layoutmuster: Layoutmuster: https://web.dev/patterns/layout/ Entwicklerressourcen von Google Developers, in denen die Verwendung von CSS zum Erstellen der Layout-Benutzeroberfläche aufgeführt ist ~ Die Anzahl wird in Zukunft weiter zunehmen. Erkunden Sie weitere Möglichkeiten. Es wird empfohlen,

Elf zu sammeln. Lowdefy

Lowdefy: https://lowdefy.com/

Lowdefy ist ein Open-Source-Low-Code-Framework, das YAML verwendet, um auf einfache Weise Webanwendungen, Verwaltungspanels, BI-Dashboards, Workflows und CRUD-Anwendungen zu erstellen

Twelve, uncut

uncut: https://uncut.wtf/

uncut ist eine moderne Font-Verzeichnis-Website mit Schwerpunkt auf Open Source, kostenlos für den persönlichen und kommerziellen Gebrauch, die ich mir angesehen habe Insgesamt stehen Ihnen 90 Schriftarten zur Auswahl~

13. fetoolkit

fetoolkit: https://www.fetoolkit.io/

fetoolkit ist eine Front-End-Entwicklungs-Toolbox, die 20 enthält Eine Vielzahl von Codierungs- und Bild-bezogenen Tools, darunter CSS, JSON, Symbole, SVG, Bildkomprimierung, NPM, Regex und andere Tools

Fourteen, Unicode Arrows

Unicode Arrows: https://unicodearrows .com/

Unicode Arrows ist eine Sammlung von Hexadezimalcodes, die sich auf verschiedene Pfeile beziehen.

Fünfzehn, Komponenten-KI: https://components.ai/ Theme Builder, einschließlich Syntaxhervorhebungsgenerator, Farbverlauf, Schattentool, SVG-Mustergenerator, animierter Hintergrund usw., alle können online debuggt werden, sehr einfach zu verwenden

16, Glitter

Glitter: https: //wh0.github.io/glitter/

Glitter ist ein fluoreszierender Schriftartengenerator, aber es sieht gut aus. Wir können den Text nach Belieben ändern und schließlich in SVG exportieren Siebzehn, Iconduck

Iconduck: https://iconduck.com/

Iconduck ist eine Open-Source-Icon-Website mit mehr als 100.000 Icons, die nach Schlüsselwörtern durchsucht werden können und alle in kommerziellen Projekten verwendet werden können. Verwendet in

18, Mustergenerator

Mustergenerator: https://doodad.dev/pattern-generator/

Mustergenerator ist eine Website, die Ihnen beim Generieren von Hintergrundbildern hilft. Es gibt Dutzende von Mustern zur Auswahl, und die Elemente in jedem Muster können über interaktive Schaltflächen nach Belieben geändert werden. Schließlich können JPEG-, PNG-, SVG- und CSS-Hintergrundcodes exportiert werden. Es unterstützt auch die Wiederherstellung des Inhalts des letzten Vorgangs nach dem Beenden

Nineteen, Buttons-Generator

Buttons-Generator: https://markodenic.com/tools/buttons-generator/

Buttons-Generator ist eine Website, die dort Buttons mit vielen interaktiven Formen und Stilen enthält Es gibt ungefähr **120+** Typen. Für diejenigen, die benutzerdefinierte Schaltflächen benötigen, können Sie diese als Referenz verwenden -tricks.com/fonts/hack/?lingual=html&theme=dark

Coding Fonts ist eine Website, die 45 Coding-Fonts sammelt. Natürlich gibt es auch kostenpflichtige „Gefällt mir“ und stellen Sie es selbst ein. Gehen Sie zum Editor (ruhig, bb, es gefällt mir immer noch am besten, kostenlos und schön). SVGrepo ist eine SVG-Symbolbibliothek mit über 300.000 kostenlosen SVG-Symbolen, von denen die meisten auch im Handel erhältlich sind . Die Website unterstützt die Suche und kann ohne Anmeldung gesammelt werden (kann im lokalen Speicher gespeichert werden). JavaScript-Welt Die Kartenbibliothek ist sofort verfügbar und unterstützt auch IOS und Android SDK

Twenty-Three, Dopefolio

Dopefolio: https://github.com/rammcodes/Dopefolio

Dopefolio ist ein sofort einsatzbereiter offizieller Website-Seitengenerator, der nicht auf a angewiesen ist Eine Reihe von Open-Source-Bibliotheken von Drittanbietern bestehen ausschließlich aus reinem HTML und CSS, sodass die SEO sehr gut ist, der Lighthouse-Score ebenfalls sehr hoch ist und die Seitenreaktionsfähigkeit unterstützt. Freunde, die eine offizielle Website-Seite benötigen, können versuchen,

Twenty-four, animista

animista: https://animista.net/

CSS-Animationsset zu verwenden, das frei angepasst werden kann Animationsparameter, Codeausschnitte generieren, einfach zu verwenden

Twenty-Five, CSS-Inspiration

CSS-Inspiration – CSS-Inspiration

https://csscoco.com/inspiration/

Der Chef wird es arrangieren Jedes Mal für Sie. Sie können es hier als Referenz verwenden, wenn Sie nach ausgefallenen Stilen aller Art suchen

Das obige ist der detaillierte Inhalt von[Zusammenfassung von Vomiting Blood] Über 20 praktische Front-End-Tools, fügen Sie sie Ihren Favoriten hinzu!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!