Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)
|
Teilen Sie eine wunderschöne Bibliothek im Animationsstil für Eingabefelder, die mit reinem CSS3 implementiert wurde – Liebe zur Texteingabe. Wenn Sie auf jedes Eingabefeld klicken, wird ein anderer Animationseffekt verwendet. Dabei werden immer die Beschriftung und der Platzhaltertext angezeigt.
Demo-Adresse: https://codepen.io/MichaelArestad/full/ohLIa HTML Quelltext:
<div Klasse="Zeile">
<p>Klicken Sie auf jede Eingabe.</p>
</div>
<div Klasse="Zeile">
<span>
<input class="basic-slide" id="name" type="text" placeholder="Ihr bester Name" /><label for="name">Name</label>
</span>
<span>
<input class="basic-slide" id="email" type="text" placeholder="Ihre bevorzugte E-Mail" /><label for="email">E-Mail</label>
</span>
<span>
<input class="basic-slide" id="phone" type="text" placeholder="Sie können uns vertrauen" /><label for="phone">Telefon</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="clean-slide" id="age" type="text" placeholder="Holen Sie sich den Highscore!" /><label for="age">Alter</label>
</span>
<span>
<input class="clean-slide" id="height" type="text" placeholder="Anzahl der Absätze" /><label for="height">Größe</label>
</span>
<span>
<input class="clean-slide" id="weight" type="text" placeholder="Lüg ruhig" /><label for="weight">Gewicht</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="gate" id="class" type="text" placeholder="Wizard!" /><label for="class">Klasse</label>
</span>
<span>
<input class="gate" id="element" type="text" placeholder="Fünf zur Auswahl" /><label for="element">Element</label>
</span>
<span>
<input class="gate" id="move" type="text" placeholder="Geheimer Buchangriff!" /><label for="move">Bewegen</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="skinny" id="english" type="text" placeholder="Sprechen Sie es?" /><label for="english">Englisch</label>
</span>
<span>
<input class="skinny" id="burger" type="text" placeholder="Ein Royale mit Käse?" /><label for="burger">Burger</label>
</span>
<span>
<input class="skinny" id="wallet" type="text" placeholder="Böses Arschloch" /><label for="wallet">Geldbörse</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="slide-up" id="card" type="text" placeholder="Gib mir Geld!" /><label for="card">Kreditkarte</label>
</span>
<span>
<input class="slide-up" id="expires" type="text" placeholder="Monat Tag, Jahr" /><label for="expires">Läuft ab</label>
</span>
<span>
<input class="slide-up" id="security" type="text" placeholder="Public" /><label for="security">Sicherheitscode</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="card-slide" id="knock" type="text" placeholder="Wer ist da?" /><label for="knock">Klopf klopf</label>
</span>
<span>
<input class="card-slide" id="max" type="text" placeholder="Max wer?" /><label for="max">Max</label>
</span>
<span>
<input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><label for="out">Karte voll ausgeschöpft ;)</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="swing" id="artist" type="text" placeholder="BO$$" /><label for="artist">Künstler</label>
</span>
<span>
<input class="swing" id="song" type="text" placeholder="Ist mir scheißegal" /><label for="song">Lied</label>
</span>
<span>
<input class="swing" id="eyes" type="text" placeholder="Verrückt" /><label for="eyes">Augen</label>
</span>
</div>
<div Klasse="Zeile">
<span>
<input class="balloon" id="state" type="text" placeholder="Flüssig, fest, gasförmig..." /><label for="state">Staat</label>
</span>
<span>
<input class="balloon" id="planet" type="text" placeholder="Wahrscheinlich Erde" /><label for="planet">Planet</label>
</span>
<span>
<input class="balloon" id="galaxy" type="text" placeholder="Milchstraße?" /><label for="galaxy">Galaxie</label>
</span>
</div>SCSS-Code: Sass-Code:
@import "Kompass/css3";
@import-URL (https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
* {
Box-Größe: Rahmenbox;
}
html,
Körper {
Überlauf-x: versteckt;
Schriftfamilie: „Open Sans“, serifenlos;
Schriftstärke: 300;
Farbe: #fff;
Hintergrund: #efefef;
}
@mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
Position: relativ;
Z-Index: 1;
&:vor {
Position: absolut;
Inhalt: "";
Anzeige: Block;
oben: 0;
links: -5000px;
Höhe: 100%;
Breite: 15000px;
z-Index: -1;
@Inhalt;
}
}
.Reihe {
maximale Breite: 800px;
Rand: 0 automatisch;
Polsterung: 60px 30px;
Hintergrund: #032429;
@include epic-sides() {Hintergrund: erben;}
Textausrichtung: zentriert;
&:erstes-Kind {
Polsterung: 40px 30px;
}
&:n-tes-Kind(2),
&:n-tes-Kind(8),
&:n-tes-Kind(10){
Hintergrund: #134A46;
}
&:n-tes-Kind(3),
&:n-tes-Kind(7) {
Hintergrund: #377D6A;
}
&:n-tes-Kind(4),
&:n-tes-Kind(6) {
Hintergrund: #7AB893;
}
&:n-tes-Kind(5) {
Hintergrund: #B2E3AF;
}
Spanne {
Position: relativ;
Anzeige: Inline-Block;
Rand: 30px 10px;
}
}
.grundlegende Folie {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 70px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Hintergrund: #7AB893;
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
}
}
.basic-slide:Fokus,
.basic-slide:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
Rahmen-oben-links-Radius: 0;
Rahmen unten links-Radius: 0;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
transformieren: übersetzenX(-100%);
}
}
.saubere Folie {
Position: relativ;
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 60px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
transformieren: übersetzenX(0);
oben: 0;
links: 0;
unten: 0;
Polsterung: 13px 15px;
Schriftgröße: 11px;
Schriftstärke: 700;
Texttransformation: Großbuchstaben;
Farbe: #032429;
Textausrichtung: links;
Textschatten: 0 1px 0 rgba(255,255,255,.4);
Übergang: alle 0,3 s Ein- und Ausblenden, Farbe 0,3 s Ausblenden;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Überlauf: versteckt;
&:nach {
Inhalt: "";
Position: absolut;
oben: 0;
rechts: 100%;
unten: 0;
Breite: 100 %;
Hintergrund: #7AB893;
z-Index: -1;
transformieren: übersetzen(0);
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
}
}
}
.clean-slide:focus,
.clean-slide:active {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
Rahmen-oben-links-Radius: 0;
Rahmen unten links-Radius: 0;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
Farbe: #fff;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
transformieren: übersetzenX(-100%);
&:nach {
transformieren: übersetzen (100 %);
}
}
}
.Tor {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 65px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Hintergrund: #7AB893;
Übergang: alle 0,4 s sanftes Ein- und Aussteigen;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Transform-Origin: links unten;
Z-Index: 99;
&:vor,
&:nach {
Inhalt: "";
Position: absolut;
oben: 0;
rechts: 0;
unten: 0;
links: 0;
Rahmenradius: 3px;
Hintergrund: #377D6A;
Transform-Origin: links unten;
Übergang: alle 0,4 s sanftes Ein- und Aussteigen;
Zeigerereignisse: keine;
z-Index: -1;
}
&:vor {
Hintergrund: rgba(3,36,41,.2);
z-Index: -2;
rechts: 20%;
}
}
}
span:n-tes-Kind(2) .gate {
Texteinzug: 85px;
}
span:nth-child(2) .gate:fokus,
span:n-tes-Kind(2) .gate:aktiv{
Texteinzug: 0;
}
.gate:fokus,
.gate:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
Rahmen oben rechts – Radius: 3px;
Rahmen unten rechts – Radius: 3px;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
transformieren: drehen (-66 Grad);
Rahmenradius: 3px;
&:vor {
transformieren: drehen (10 Grad);
}
}
}
.schlank {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 75px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
transformieren: übersetzenX(0);
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Überlauf: versteckt;
&:vor,
&:nach {
Inhalt: "";
Position: absolut;
rechts: 0;
links: 0;
z-Index: -1;
Übergang: alle 0,3 s sanft ein- und ausfahren;
}
&:vor {
// Dünnes Stück hier
oben: 5px;
unten: 5px;
Hintergrund: #377D6A; // ändern Sie dies in #134A46
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
}
&:nach {
oben: 0;
unten: 0;
Hintergrund: #377D6A;
}
}
}
.skinny:fokus,
.skinny:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
transformieren: übersetzenX(-100%);
&:nach {
transformieren: übersetzenX(100%);
}
}
}
.nach oben schieben {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 80px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
transformieren: übersetzenX(0);
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Überlauf: versteckt;
&:vor,
&:nach {
Inhalt: "";
Position: absolut;
rechts: 0;
links: 0;
z-Index: -1;
Übergang: alle 0,3 s sanft ein- und ausfahren;
}
&:vor {
// Dünnes Stück hier
oben: 6px;
links: 5px;
rechts: 5px;
unten: 6px;
Hintergrund: #377D6A; // ändern Sie dies in #134A46
}
&:nach {
oben: 0;
unten: 0;
Hintergrund: #377D6A;
}
}
}
span:n-tes-Kind(1) .nach-oben-schieben {
Texteinzug: 105px;
}
span:n-tes-Kind(3) .nach-oben-schieben {
Texteinzug: 125px;
}
Spanne: n-tes Kind (1) .slide-up: Fokus,
Spanne: n-tes Kind (1) .slide-up: aktiv,
Spanne: n-tes Kind (3) .slide-up: Fokus,
span:nth-child(3) .slide-up:active {
Texteinzug: 0;
}
.nach oben schieben: Fokus,
.nach oben schieben:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
transformieren: verschiebeY(-100%);
&:vor {
Rahmenradius: 5px;
}
&:nach {
transformieren: übersetzenY(100%);
}
}
}
.Kartenfolie {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 115px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Block;
Position: absolut;
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Hintergrund: #7AB893;
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Transform-Origin: rechts Mitte;
transformieren: Perspektive (300px) Skalierung X (1) Drehen Y (0 Grad);
}
}
span:n-tes-Kind(2) .card-slide {
Texteinzug: 55px;
}
span:n-tes-Kind(3) .card-slide {
Texteinzug: 150px;
}
span:nth-child(2) .card-slide:fokus,
span:nth-child(2) .card-slide:active,
span:nth-child(3) .card-slide:fokus,
span:nth-child(3) .card-slide:active {
Texteinzug: 0;
}
.card-slide:fokus,
.card-slide:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
Rahmen-oben-links-Radius: 0;
Rahmen unten links-Radius: 0;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
transformieren: Perspektive (600 Pixel), X-Verschiebung (-100 %), Y-Drehung (80 Grad);
}
}
.schwingen {
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 60px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
oben: 0;
links: 0;
Polsterung: 10px 15px;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Hintergrund: #7AB893;
Rahmen oben links – Radius: 3px;
Rahmen unten links – Radius: 3px;
Transform-Ursprung: 2px 2px;
transformieren: drehen(0);
// Es sollte einen besseren Weg geben
Animation: Zurückschwingen 0,4 s 1 Ein- und Ausschwingen;
}
}
@keyframes schwingen {
0% {
transformieren: drehen(0);
}
20% {
transformieren: drehen (116 Grad);
}
40 % {
transformieren: drehen (60 Grad);
}
60 % {
transformieren: drehen (98 Grad);
}
80 % {
transformieren: drehen (76 Grad);
}
100 % {
transformieren: drehen (82 Grad);
}
}
@keyframes schwingen zurück {
0% {
transformieren: drehen (82 Grad);
}
100 % {
transformieren: drehen(0);
}
}
.swing:Fokus,
.swing:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
Rahmen-oben-links-Radius: 0;
Rahmen unten links-Radius: 0;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
Animation: Schwung 1,4 s 1 Ein- und Ausschwingen;
transformieren: drehen (82 Grad);
}
}
.Ballon {
// Wie vorgeschlagen von https://twitter.com/dbox/status/365888496486985728
Anzeige: Inline-Block;
Breite: 215px;
Polsterung: 10px 0 10px 15px;
Schriftfamilie: „Open Sans“, sans;
Schriftstärke: 400;
Farbe: #377D6A;
Hintergrund: #efefef;
Rand: 0;
Rahmenradius: 3px;
Umriss: 0;
Texteinzug: 60px; // Beliebig.
Übergang: alle 0,3 s sanft ein- und ausfahren;
&::-webkit-Eingabeplatzhalter {
Farbe: #efefef;
Texteinzug: 0;
Schriftstärke: 300;
}
+ Etikett {
Anzeige: Inline-Block;
Position: absolut;
oben: 8px;
links: 0;
unten: 8px;
Polsterung: 5px 15px;
Farbe: #032429;
Schriftgröße: 11px;
Schriftstärke: 700;
Texttransformation: Großbuchstaben;
Textschatten: 0 1px 0 rgba(19,74,70,0);
Übergang: alle 0,3 s sanft ein- und ausfahren;
Rahmenradius: 3px;
Hintergrund: rgba(122,184,147,0);
&:nach {
Position: absolut;
Inhalt: "";
Breite: 0;
Höhe: 0;
oben: 100 %;
links: 50%;
Rand links: -3px;
Rahmen links: 3px durchgehend transparent;
Rahmen rechts: 3px durchgehend transparent;
Rahmen oben: 3px durchgezogen rgba(122,184,147,0);
Übergang: alle 0,3 s sanft ein- und ausfahren;
}
}
}
.Ballon:Fokus,
.Ballon:aktiv {
Farbe: #377D6A;
Texteinzug: 0;
Hintergrund: #fff;
&::-webkit-Eingabeplatzhalter {
Farbe: #aaa;
}
+ Etikett {
Farbe: #fff;
Textschatten: 0 1px 0 rgba(19,74,70,.4);
Hintergrund: rgba(122,184,147,1);
transformieren: übersetzenY(-40px);
&:nach {
Rahmen oben: 4px durchgezogen rgba(122,184,147,1);
}
}
}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. |
<<: Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen
>>: MySQL-Leistungsoptimierungs-Index-Pushdown
Artikel empfehlen
HTML-Tabellen-Tag-Tutorial (26): Zellen-Tag
Die Attribute des <TD>-Tags werden verwende...
Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung
Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...
Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus
Verwenden von mock.js im Vue-Projekt Auswahl des ...
Detaillierte Schritte zum manuellen Konfigurieren der IP-Adresse in Linux
Inhaltsverzeichnis 1. Geben Sie zuerst das Konfig...
Analysieren Sie das Problem beim Herunterladen der Oracle 11g-Image-Konfiguration in Docker
1. Ziehen Sie das Bild Docker-Pull-Registrierung....
Allgemeine Datumsvergleichs- und Berechnungsfunktionen in MySQL
Implementierung des Zeitvergleichs in MySql unix_...
Implementierung der K8S-Bereitstellung eines Docker-Containers
Umgebung: (Docker, K8s-Cluster), fahren Sie mit d...
Mehrere Lösungen für die Ausrichtung von CSS-Datensatztextsymbolen
Während der Entwicklung kommt es sehr häufig vor,...
JavaScript-Dom-Objektoperationen
Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...
Verwendung des HTML-H-Titel-Tags
Die Verwendung von H-Tags, insbesondere h1, war sc...
Detaillierte Erklärung des Linux-Kernel-Makros Container_Of
Inhaltsverzeichnis 1. Wie werden Strukturen im Ge...
Detaillierte Erklärung zur Verwendung des at-Befehls für einmalig geplante Aufgaben in Linux
Inhaltsverzeichnis Vorwort 1. Einführung in einma...
Starten Sie den Docker-Dienst neu, um den automatischen Start- und Stoppbefehl anzuwenden (empfohlen)
Schauen wir uns den Befehl zum Neustarten der Doc...
So ändern Sie das Passwort und legen die Richtlinie zur Passwortkomplexität in Ubuntu fest
1. Passwort ändern 1. Ändern Sie das Passwort nor...