So verwenden Sie CSS3, um den Farbverlauf-Leuchteffekt des Eingabefelds zu erzielen

Dieser Artikel stellt hauptsächlich vor, wie man CSS3 verwendet, um den Farbverlauf und den Leuchteffekt des Eingabefelds zu erzielen. Jetzt kann ich ihn mit Ihnen teilen

css3 wurde gestartet Es ist lange her, obwohl die wichtigsten Mainstream-Browser nicht sehr kompatibel damit sind, insbesondere IE ... Aber durch das Hinzufügen von Präfixen wie -moz- -webkit- können Sie unter Chrome und Firefox bessere Ergebnisse erzielen , der weiterhin durch den Übergangseffekt

implementiert wird. Dies ist nicht nur ein Box-Shadow-Attribut, sondern auch ein gleichmäßiger Glanz langsamer Glühübergangseffekt.

Bevor Sie mit dem Lernen fortfahren, müssen Sie über Grundkenntnisse in CSS3 verfügen. Um all dies zu tun, müssen Sie die Schatten-, RGBa- und Übergangseigenschaften von CSS3 verstehen, sonst können Sie es nicht verstehen.

1. Erstellen Sie einen leuchtenden Rahmen-Textfeldeffekt

<input type="text" class="sdw" />

Dann möchten wir, dass diese Eingabekomponente leuchtet, wenn sie zum Fokus wird (klicken) und angezeigt wird Für Blau füge ich einfach ein Stück CSS-Code hinzu:

sdw:focus{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(93,149,242,.75);
box-shadow:0 0 8px rgba(93,149,242,.105);
-moz-box-shadow:0 0 8px rgba(93,149,242,.5);
-webkit-box-shadow:0 0 8px rgba(93,149,242,3);
}

und das war's. Die RGB-Farben können je nach persönlichem Geschmack verändert werden.

2. Fügen Sie den Randleuchteffekt global zu allen Eingabekomponenten hinzu

Wenn Sie möchten, dass alle Texteingabefelder auf einer Webseite diesen Effekt haben, legen Sie einfach das CSS global fest Das ist es.

Fügen Sie diesen Satz zu Ihrer CSS-Datei hinzu:

input[type=text]:focus,input[type=password]:focus,textarea:focus{}

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird Achten Sie auf PHP Chinese Net!

Verwandte Empfehlungen:

So verwenden Sie CSS3, um ein einfaches durchscheinendes 3D-Würfelbild zu erstellen

So verwenden Sie CSS3 mit IE-Filter Mirror erzielt Verlaufs- und Projektionseffekte

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um den Farbverlauf-Leuchteffekt des Eingabefelds zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!