Maison

Effets spéciaux JS

Effets spéciaux CSS3

Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche

Télécharger maintenant Aperçu

<!doctype html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<title>
<style>
* { marge : 0 ; remplissage : 0 ; }
corps { marge : 0 ; remplissage : 0 ; décoration de texte : aucune ; taille de police : 14 px ; }
li { style de liste : aucun ; }
.menu {largeur : 1000px ; hauteur : 600 px ; marge : 30px automatique ; couleur d'arrière-plan : #ececec ; }
.menu .menuTop { couleur d'arrière-plan : #F10215 ; couleur : #fff ; largeur : 140 px ; hauteur : 40px ; remplissage à gauche : 20 px ; hauteur de ligne : 40 px ; curseur : pointeur ; }
.menu ul { largeur : 160 px ; couleur d'arrière-plan : #fff ; bordure : 2px solide #F10215 ; dimensionnement de la boîte : bordure-boîte ; position : relative ; }
.menu ul li { hauteur : 30 px ; remplissage à gauche : 8 px ; aligner le texte : gauche ; hauteur de ligne : 30 px ; taille de police : 13 px ; arrière-plan : url(image/1.png) droit de non-répétition ; indice z : 2 ; }
.menu ul li a { couleur : #7070770 ; }
.menu ul li a:hover { couleur : rouge ; décoration de texte : souligner ; curseur : pointeur ; }
.menu ul li:hover { border: 1px solid #DDD; bordure droite : 0 ; image d'arrière-plan : aucune ; }
.menu ul li:hover .submenu { display: block; }
.menu ul li:hover span {largeur : 30 px ; hauteur : 30px ; affichage : bloc en ligne ; couleur d'arrière-plan : #FFF ; Flotter à droite; indice z : 100 ; position : relative ; }
.menu ul li .submenu { position : absolue ; gauche : 146px ; haut : 0 ; largeur : 720 px ; hauteur : 300px ; bordure : 1px solide #DDD ; ombre de la boîte : 0 0 8px #DDD ; -moz-box-shadow : 0 0 8px #DDD ; -webkit-box-shadow : 0 0 8px #DDD ; couleur d'arrière-plan : #FFF ; indice z : 3 ; affichage : aucun ; }
.menu ul li .submenu .subleft { margin-left: 0px; largeur : 400 px ; hauteur : 300px ; flotteur : gauche ; remplissage : 5 px ; }
.menu ul li .submenu .subleft dl { débordement : caché ; bordure inférieure : 1px solide #D1D1D1 ; remplissage : 10px 0 ; }
.menu ul li .submenu .subleft dl dt { float: gauche; hauteur : 22px ; hauteur de ligne : 22 px ; marge droite : 10 px ; poids de la police : gras ; couleur : #707070 ; taille de police : 12 px ; curseur : pointeur ; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { display: block; flotteur : gauche ; bordure gauche : 1px solide #707070 ; remplissage : 0 5px ; couleur : #707070 ; hauteur : 14px ; hauteur de ligne : 14 px ; marge : 3px 0 ; taille de police : 11 px ; }
.menu ul li .submenu .subright { largeur : 310 px ; hauteur : 300px ; couleur de fond : bleu ; flotteur : gauche ; }
</style>

</tête>
<body><script src="/demos/googlegg.js"></script>
<div class="menu">
<div class="menuTop">全部商品分类</div>
<ul>

<li> <a herf="javascript:;">Titre de premier niveau 1</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Niveau 111</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: antiquewhite"> </div>
</div>
</li>

<li> <a herf="javascript:;">Titre de premier niveau 2</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 222</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aigue-marine">;
</li>

<li> <a herf="javascript:;">Titre niveau 1 3</a> <div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 333</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue">;
</li>

<li> <a herf="javascript:;">Titre niveau 1 4</a> <div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 444</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey">;
</li>

<li> <a herf="javascript:;">Titre de premier niveau 5</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 555</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen">;
</li>

<li> <a herf="javascript:;">Titre de premier niveau 6</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 666</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavande">;
</li>

<li> <a herf="javascript:;">Titre de premier niveau 7</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 777</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 7</a> </dd>
</dl>
</div>
<div class="subright">;
</li>

<li> <a herf="javascript:;">Titre de premier niveau 8</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 888</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 9</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 999</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose">;
</li>

<li> <a herf="javascript:;">Titre de premier niveau 10</a> <div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 1010</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a> </dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:saumon"> </div>
</li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; police:normal 14px/24px 'MicroSoft YaHei';"> </div>
</corps>
</html>

Il s'agit d'un code relativement simple qui utilise les attributs de survol de la souris CSS pour créer un menu de navigation déroulant de catégorie de gauche couramment utilisé pour les sites Web des centres commerciaux.

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Comment utiliser habilement les effets spéciaux CSS3 pour améliorer l'expérience utilisateur des pages Web

09 Sep 2023

Comment utiliser habilement les effets spéciaux CSS3 pour améliorer l'expérience utilisateur des pages Web Avec le développement d'Internet, la conception Web et l'expérience utilisateur sont devenues des liens importants dans le développement de sites Web. L'application d'effets spéciaux CSS3 peut ajouter de la dynamique et des effets visuels aux pages Web et améliorer l'expérience utilisateur. Cet article présentera plusieurs effets spéciaux CSS3 courants et leurs exemples de code pour aider les développeurs à mieux utiliser les effets spéciaux CSS3 et à améliorer l'expérience utilisateur des pages Web. Effet de transition (Transition) L'effet de transition est l'un des effets spéciaux les plus basiques de CSS3 en modifiant un certain attribut.

Implémentation d'effets visuels CSS3

22 Mar 2018

Cette fois, je vais vous présenter l'implémentation des effets spéciaux visuels CSS3. Quelles sont les précautions pour réaliser les effets spéciaux visuels CSS3. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Comment utiliser CSS3 pour obtenir des effets stéréoscopiques 3D

14 Mar 2018

Cette fois, je vais vous montrer comment utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D. Quelles sont les précautions à prendre pour utiliser CSS3 pour obtenir des effets spéciaux tridimensionnels 3D, jetons un coup d'œil.

Comment utiliser Vue+CSS3 pour créer des effets interactifs

27 Nov 2017

Nous savons que des effets interactifs ou des effets spéciaux seront certainement utilisés lors de la réalisation de projets. J'utilise Vue pour un projet que j'ai développé. En termes de développement de la pile technologique, j'ai utilisé Vue+CSS3. css3 est très utile pour développer des effets spéciaux. Aujourd'hui, je vais vous proposer un tel tutoriel.

Partage de données vidéo d'effets spéciaux CSS3 3D

31 Aug 2017

"Tutoriel vidéo sur les effets spéciaux CSS3 3D" utilise l'attribut de transition, l'attribut de perspective et l'attribut de transformation dans CSS3 pour créer des effets tridimensionnels réels et utilisables.

CSS3 réalise un effet de retournement dynamique

26 Dec 2017

Inspiré des effets spéciaux d'animation de cartes à retourner 3D de Baidu Tieba, cet article partage principalement un effet spécial qui utilise la nouvelle fonctionnalité CSS3 pour obtenir des effets spéciaux de cartes à retourner 3D. Les amis dans le besoin peuvent s'y référer. J'espère que cela aide tout le monde.

Comment utiliser CSS3 pour obtenir un effet de lueur interne à la police (explication détaillée)

28 Sep 2018

Dans la société actuelle, avec le développement croissant d'Internet, les exigences des utilisateurs en matière d'expérience utilisateur sur le Web deviennent de plus en plus exigeantes, ce qui a donné naissance à davantage de dérivés d'effets spéciaux, tels que les effets d'ombre, les effets de lueur, etc. Cet article présentera vous comment utiliser CSS3 Obtenir des effets spéciaux pour l'éclat des polices

En savoir plus sur le composant de barre de progression dans Bootstrap

23 Feb 2021

Dans les pages Web, les effets de barre de progression ne sont pas rares, tels que : le système de bissection, l'état de chargement, etc. Le composant de barre de progression utilise les attributs de transition et d'animation de CSS3 pour compléter certains effets spéciaux. Ces effets spéciaux sont disponibles dans les versions IE9 et inférieures. , et les anciennes versions de Firefox.

rotation des effets CSS3

27 May 2023

Rotation des effets spéciaux CSS3 Dans la conception Web, les effets spéciaux dynamiques peuvent augmenter l'interactivité et le talent artistique des pages Web, permettant aux utilisateurs de parcourir les pages Web plus facilement. Parmi eux, l’effet de rotation est un effet spécial relativement courant. En CSS3, les effets de rotation peuvent être obtenus grâce à l'attribut transform. 1. Utilisez la transformation pour réaliser la rotation. L'attribut transform dans CSS3 est utilisé pour obtenir des effets de déformation des éléments, tels que la rotation, le mouvement, la mise à l'échelle, etc. Lors de la réalisation de l'effet de rotation des éléments, vous pouvez utiliser la fonction de rotation. La syntaxe spécifique est la suivante : tra.

See all articles