interface Web
tutoriel CSS
Créer un effet de navigation dans le menu basé sur la transition d'attribut CSS3
Créer un effet de navigation dans le menu basé sur la transition d'attribut CSS3
Cet article présente principalement la transition d'attribut basée sur CSS3 pour créer un effet de navigation dans le menu, qui peut réaliser la fonction de changement dynamique du curseur d'arrière-plan lorsque la souris glisse sur les éléments de menu. L'implémentation de la transition d'attribut basée sur CSS3 est très pratique. et est nécessaire. Les amis peuvent se référer à
Cet article décrit l'exemple de création d'un effet de navigation dans le menu basé sur la transition d'attribut CSS3. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Menu de navigation CSS3, lorsque votre couche de mouvement est en dessous de la couche d'affichage, la transition fera scintiller la page. La raison est un bug généré par Chrome lors du rendu initial de l'animation CSS. . Bien que ce problème ne puisse pas être vérifié pour le moment. La cause première, mais il existe actuellement deux solutions connues :
-webkit-backface-visibility: Hidden (Définissez si l'arrière de l'élément converti est ; visible face à l'utilisateur : caché)
-webkit-transform-style : préserver-3d ; (Définir la façon dont les éléments intégrés sont rendus dans l'espace 3D : préserver la 3D).
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的属性transition制作菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#45B5DA;margin:0px;padding:0px;}
.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}
li{
width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;
}
li#chage{
width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;
border-radius:10px;
background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));
box-shadow:0px 2px 0px rgba(255, 255, 255, .3);
-webkit-transform: translate(0px,0px);
-webkit-transition:-webkit-transform .2s ease-out;
}
</style>
</head>
<body>
<section class="tips">
当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）
qq群:197326136
</section>
<section id="nav">
<li href="#" title＝"css3菜单,css3菜单导航">首页</li>
<li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>
<li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>
<li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>
<li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>
<li href="javascript:void(0);" id="chage"></li>
</section>
</body>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
var zhj = {};
zhj.slide = function(index){
var transX = 74*index;
$('chage').style['-webkit-transform'] = 'translate('+transX+'px,0px)';
}
</script>
</html>Ce qui précède est Tout le contenu de cet article, j'espère qu'il sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Analyse du rendu du modèle de transformation de transformation en CSS3
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage
Aug 22, 2023 am 10:13 AM
Dans Windows 11, le menu Démarrer a été repensé et propose un ensemble simplifié d'applications disposées dans une grille de pages, contrairement à son prédécesseur, qui comportait des dossiers, des applications et des applications dans le groupe du menu Démarrer. Vous pouvez personnaliser la disposition du menu Démarrer, l'importer et l'exporter vers d'autres appareils Windows pour la personnaliser à votre guise. Dans ce guide, nous discuterons des instructions étape par étape pour importer la disposition de démarrage afin de personnaliser la disposition par défaut sur Windows 11. Qu’est-ce qu’Import-StartLayout dans Windows 11 ? Import Start Layout est une applet de commande utilisée dans Windows 10 et les versions antérieures pour importer les personnalisations du menu Démarrer dans
Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)
Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Astuce CSS : utilisez la transition pour conserver l'état de survol
Sep 27, 2022 pm 02:01 PM
Comment préserver l’état de survol ? L'article suivant vous expliquera comment conserver l'état de survol sans utiliser JavaScript. J'espère qu'il vous sera utile !
Comment définir par défaut « Afficher plus d'options » dans le menu contextuel de Windows 11
Jul 10, 2023 pm 12:33 PM
L'un des changements les plus ennuyeux dont nous, les utilisateurs, ne souhaitons jamais est l'inclusion de « Afficher plus d'options » dans le menu contextuel du clic droit. Cependant, vous pouvez le supprimer et récupérer le menu contextuel classique dans Windows 11. Fini les clics multiples et la recherche de ces raccourcis ZIP dans les menus contextuels. Suivez ce guide pour revenir à un menu contextuel complet par clic droit sur Windows 11. Correctif 1 – Ajuster manuellement le CLSID Il s’agit de la seule méthode manuelle de notre liste. Vous ajusterez des clés ou des valeurs spécifiques dans l'Éditeur du Registre pour résoudre ce problème. Remarque – Les modifications du registre comme celle-ci sont très sûres et fonctionneront sans aucun problème. Par conséquent, vous devez créer une sauvegarde du registre avant d’essayer cela sur votre système. Étape 1 – Essayez-le
Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code)
Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
Qu'est-ce que le chiffre 8 horizontal sur la carte de navigation ?
Jun 27, 2023 am 11:43 AM
Le chiffre 8 horizontal sur la carte de navigation signifie brume, modéré est un signal d'avertissement jaune 8 et grave est un signal d'avertissement orange 8.
Sortie de la dernière version 18.8.0 de l'application Baidu Maps, introduisant pour la première fois la fonction radar de feux de circulation et ajoutant une fonction de recommandation de stationnement en temps réel
Aug 06, 2023 pm 06:05 PM
Les versions Android et iOS de Baidu Map App ont publié la version 18.8.0, qui introduit pour la première fois la fonction radar des feux de circulation, leader du secteur. Selon l'introduction officielle, après avoir allumé le radar des feux de circulation, il prend en charge la détection automatique. des feux de circulation pendant la conduite sans avoir à saisir une destination. Beidou High-Precision peut positionner en temps réel, plus d'un million de feux de circulation à travers le pays déclenchent automatiquement des rappels de vagues vertes. De plus, la nouvelle fonction offre également une navigation entièrement silencieuse, rendant la zone de la carte plus concise, les informations clés claires en un coup d'œil et aucune diffusion vocale, permettant au conducteur de se concentrer davantage sur la conduite. Baidu Maps lancera une fonction de compte à rebours des feux de circulation. Octobre 2020, prenant en charge la prévision du compte à rebours en temps réel, la navigation affichera automatiquement les secondes restantes du compte à rebours à l'approche d'un carrefour de feux de circulation, permettant aux utilisateurs de toujours comprendre les conditions routières à venir. Compte à rebours aux feux tricolores jusqu'au 31 décembre 2022
Comment supprimer l'option « Ouvrir dans le terminal Windows » du menu contextuel du clic droit dans Windows 11
Apr 13, 2023 pm 06:28 PM
Par défaut, le menu contextuel du clic droit de Windows 11 comporte une option appelée Ouvrir dans le terminal Windows. Il s'agit d'une fonctionnalité très utile qui permet aux utilisateurs d'ouvrir le terminal Windows à un emplacement spécifique. Par exemple, si vous cliquez avec le bouton droit sur un dossier et sélectionnez l'option « Ouvrir dans le terminal Windows », le terminal Windows se lancera et définira cet emplacement spécifique comme répertoire de travail actuel. Bien qu’il s’agisse d’une fonctionnalité géniale, tout le monde ne trouve pas son utilité. Certains utilisateurs peuvent tout simplement ne pas vouloir cette option dans leur menu contextuel du clic droit et souhaiter la supprimer pour ranger leur menu contextuel du clic droit.
