Maison >interface Web >tutoriel CSS >CSS peut utiliser l'arrière-plan de la balise A pour créer des effets intéressants.

CSS peut utiliser l'arrière-plan de la balise A pour créer des effets intéressants.

PHP中文网
PHP中文网original
2016-05-16 12:06:371807parcourir

Cet effet est un effet que quelqu'un m'a écrit aujourd'hui et m'a posé des questions à ce sujet. Je me souviens que j'avais écrit un effet similaire avant d'utiliser l'arrière-plan de la balise A. Alors je suis revenu et j'ai noté les effets qu'il avait demandés ! Au fait, j'aimerais le publier pour le partager avec vous. Si vous êtes très créatif, vous pourrez certainement créer des effets plus intéressants.

L'effet qu'il a proposé est l'effet d'un FLASH sur la page d'accueil de Jiutian Music. Il doit utiliser CSS pour imiter le même effet, probablement parce qu'il ne veut pas utiliser FLASH ou SEO. J'ai donc utilisé FW pour créer deux images GIF afin de simuler cet effet. Comme il s'agissait de tests, de nombreux aspects tels que les images n'ont pas été pris en compte en détail. C'est un peu brouillon, mais ça a quand même l'air intéressant, haha...

Tout d'abord : a:link, a:visited, a:hover, a:active : Certaines personnes diront peut-être que c'est un non-sens. Mais si un novice voit cela, cela lui sera très utile. Ce que les autres vous diront sera toujours plus rapide que de le comprendre par vous-même.

Copier le code Le code est le suivant :


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



Les déclarations ci-dessus définissent respectivement "lien normal", "lien visité", "lorsque la souris est garée au-dessus" et "cliquez sur le style" temps "de la souris.

Pour les novices, vous devez faire attention ici. Lors du processus d'écriture, l'ordre de ces quatre lignes doit être écrit dans l'ordre ci-dessus, sinon l'effet affiché sera différent de celui attendu. L'aspect mémoire simple est "LVHA". love ha.

Voici les deux images utilisées pour créer cet effet :
 
Ce qui suit est la partie CSS :

Copier le code Le code est le suivant :




ci-dessous C'est la partie mise en page :
Code du programme

Copier le code Le code est le suivant :




Voici l'effet :


[Ctrl+A pour tout sélectionner Remarque : si vous devez introduire des J externes, vous devez actualiser pour exécuter]



Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn