CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts

CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts

Und hier nun ohne weitere Umschweife die Renderings.

Der Kerncode lautet Übergang: Kubik-Bézier (0,68, -0,55, 0,27, 1,55) alles 1en; durch den Kubik-Bézier (Bessel-Kurve) des Übergangsattributs wird dem Übergangseffekt ein Puffereffekt hinzugefügt. Das Hauptmodul des HTML-Codes ist eine Eingabe plus ein übergeordnetes Div. Die Div-Breite muss größer als die Eingabebreite sein. Ohne kubisches Bézier kann dieser Effekt erzielt werden. Übergang: alles 1en;

Dem Übergangseffekt fehlt ein Puffereffekt. Die Bewegungskurve, die wir hier verwenden, ist

Zum Schluss noch der komplette Code

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="utf-8">
        <style type="text/css">
            .Suche-Wrap{
                Rand: 0 automatisch;
                Breite: 200px;
                Höhe: 200px;
            }
            .suchen{
                Breite: 50px;
                Höhe: 30px;
                Rand: 20px 10px 0 0;
                Rand: 1px durchgezogen #4000FF !wichtig;
                Polsterung: 0 10px;
                schweben: rechts;
                Rahmenradius: 5px;
                Farbe: #fff;
                Übergang: alles 1en;
                Deckkraft: .5;
            }
            .Suche:Fokus{
                Breite: 100 %;
                Umriss: keiner;
            }
        </Stil>
    </Kopf>
    <Text>
        <div Klasse="Suche-Wrap">
            <Eingabetyp="Text" Name="" Klasse="Suche">
        </div>
    </body>
</html>

Dies ist das Ende dieses Artikels über die Verwendung von CSS3+Bézierkurven zum Erzielen eines versenkbaren Eingabesuchfeldeffekts. Weitere relevante Inhalte zu versenkbaren Eingabesuchfeldern mit CSS3-Bézierkurven finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Prinzip und Anwendung der MySQL-Master-Slave-Synchronisation

>>:  Analysieren Sie die Methode zur Überwachung von Nginx durch Prometheus + Grafana

Artikel empfehlen

Detaillierte Erläuterung des Prozesses zum Konfigurieren mehrerer SVN-Repositorys auf Linux-Servern

1. Erstellen Sie ein Repository im angegebenen Ve...

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

Das Projekt muss MySQL verwenden. Da ich es zuvor...

Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL

In MySQL können alle Felder der Typen char, varch...

So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage

Dieses Mal verwenden wir HTML+CSS-Layout, um eine...

15 Best Practices für HTML-Anfänger

Hier sind 30 Best Practices für HTML-Anfänger. 1....

CSS und JS für eine romantische Meteorschauer-Animation

1. Rendern 2. Quellcode HTML < Textkörper >...

So löschen Sie den gesamten Inhalt eines Verzeichnisses mit Ansible

Studierende, die Ansible verwenden, wissen, dass ...

WeChat-Miniprogramme implementieren Sternebewertung

In diesem Artikel wird der spezifische Code für d...

Was sind die Unterschiede zwischen xHTML- und HTML-Tags?

Alle Tags müssen klein geschrieben sein In XHTML m...

Zusammenfassung des Prozesses und der häufigsten Probleme beim Verbinden von VS2019 mit einer MySQL-Datenbank

Ich habe heute Nachmittag mit der Konfiguration v...

Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen

Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...

Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen

Die Echtzeitreplikation ist die wichtigste Method...

So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33

Problem: Die Partition, in der MySQL Datendateien...

Nachdem Webpack-cli erfolgreich installiert wurde, prüfen Sie den Fehlerfall webpack -v für Details.

Inhaltsverzeichnis Frage 1. Installieren Sie webp...

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

Probieren wir hier den Reverse-Proxy von Nginx au...