Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS kann den Hintergrund des A-Tags nutzen, um interessante Effekte zu erzeugen

PHP中文网
Freigeben: 2016-05-16 12:06:37
Original
1737 Leute haben es durchsucht

Dieser Effekt ist ein Effekt, den mir heute jemand geschrieben und danach gefragt hat. Ich erinnere mich, dass ich einen ähnlichen Effekt geschrieben habe, bevor ich den Hintergrund des A-Tags verwendet habe. Also bin ich einfach zurückgekommen und habe die von ihm gewünschten Effekte aufgeschrieben! Übrigens möchte ich es veröffentlichen, um es mit Ihnen zu teilen. Wenn Sie sehr kreativ sind, können Sie auf jeden Fall interessantere Effekte erzielen.

Der von ihm vorgeschlagene Effekt ist der Effekt eines FLASH auf der Homepage von Jiutian Music. Er muss CSS verwenden, um den gleichen Effekt zu imitieren, wahrscheinlich weil er weder FLASH noch SEO verwenden möchte. Also habe ich mit FW zwei GIF-Bilder erstellt, um diesen Effekt zu simulieren. Da es sich um Testzwecke handelte, wurden viele Aspekte wie die Bilder nicht im Detail berücksichtigt. Es ist ein bisschen grob, aber es sieht trotzdem interessant aus, haha...

Zuerst: a:link, a:visited, a:hover, a:active: Manche Leute mögen sagen, dass das Unsinn ist. Aber wenn ein Neuling dies sieht, wird es immer sehr nützlich sein, was andere Ihnen sagen, als es selbst zu verstehen.

Code kopieren Der Code lautet wie folgt:


a:link{}
a:visited {}
a: hover {}
a:active {}



Die obigen Anweisungen definieren jeweils „normaler Link“, „besuchter Link“, „wenn die Maus oben geparkt ist“ und „Klicken Sie mit der Maus im „Zeit“-Stil.

Anfänger müssen hier beim Schreiben darauf achten, dass die Reihenfolge dieser vier Zeilen in der oben angegebenen Reihenfolge angegeben wird, da sonst der angezeigte Effekt anders ausfällt als erwartet. Der einfache Speicheraspekt ist „LVHA“. Liebe ha.

Die folgenden zwei Bilder wurden verwendet, um diesen Effekt zu erzeugen:
 
Das Folgende ist der CSS-Teil:

Code kopieren Der Code lautet wie folgt:




unten Es ist der Layoutteil:
Programmcode

Code kopieren Der Code lautet wie folgt:




Der folgende Effekt ist:


[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen]



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!