Créer un effet de navigation dans le menu basé sur la transition d'attribut CSS3-tutoriel CSS-php.cn

Créer un effet de navigation dans le menu basé sur la transition d'attribut CSS3

不言

Libérer： 2018-07-02 10:57:48

original

1544 Les gens l'ont consulté

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;
    $(&#39;chage&#39;).style[&#39;-webkit-transform&#39;] = &#39;translate(&#39;+transX+&#39;px,0px)&#39;;
  }
</script>
</html>

Copier après la connexion

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

marque d'omission de couleur dégradé CSS ombre de texte de police intégrée Une introduction complète à

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!