基于css3的属性transition制作菜单导航的效果-css教程-PHP中文网

首页

web前端

css教程

基于css3的属性transition制作菜单导航的效果

不言

Jul 02, 2018 am 10:57 AM

css3 transition 导航菜单

这篇文章主要为大家介绍了基于css3的属性transition制作菜单导航效果,可实现鼠标滑过菜单项动态改变背景滑块的功能,基于css3的属性transition实现,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下：

CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：

-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）

-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）。

运行效果截图如下：

具体代码如下：

<!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>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7518

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Windows 11: 导入和导出开始布局的简便方法 Aug 22, 2023 am 10:13 AM

在Windows11中，“开始”菜单经过重新设计，并具有一组简化的应用，这些应用排列在页面网格中，这与它的前身不同，后者在“开始”菜单上有文件夹、应用和组。您可以自定义“开始”菜单布局，并将其导入并导出到其他Windows设备，以根据您的喜好对其进行个性化设置。在本指南中，我们将讨论在Windows11上导入开始布局以自定义默认布局的分步说明。什么是Windows11中的Import-StartLayout？导入开始布局是Windows10和更早版本中使用的cmdlet，用于将“开始”菜单的自定

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

CSS小技巧：利用transition保留hover状态 Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！

如何在Windows 11的右键单击菜单中默认“显示更多选项” Jul 10, 2023 pm 12:33 PM

我们用户从来不想要的最烦人的更改之一是在右键单击上下文菜单中包含“显示更多选项”。但是，您可以删除它并取回Windows11中的经典上下文菜单。不再需要多次单击并在上下文菜单中查找这些ZIP快捷方式。按照本指南返回Windows11上成熟的右键单击上下文菜单。修复1–手动调整CLSID这是我们列表中唯一的手动方法。您将在注册表编辑器中调整特定键或值以解决此问题。注意–像这样的注册表编辑非常安全，并且可以正常工作。因此，在系统上尝试此操作之前，您应该创建注册表备份。步骤1–尝试

巧用CSS实现各种奇形怪状按钮（附代码） Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

导航地图上横着的8字是什么 Jun 27, 2023 am 11:43 AM

导航地图上横着的8字是霾，中度是黄色8预警信号，重度是橙色8预警信号。

百度地图 App 最新版本 18.8.0 发布，首次引入红绿灯雷达功能，并新增实时停车推荐功能

百度地图App安卓版/iOS版均已发布18.8.0版本，首次引入红绿灯雷达功能，业内领先据官方介绍，开启红绿灯雷达后，支持开车自动探测红绿灯，不用输入目的地，北斗高精可以实时定位，全国100万+红绿灯自动触发绿波提醒。除此之外，新功能还提供全程静音导航，使图区更简洁，关键信息一目了然，且无语音播报，使驾驶员更加专注驾驶百度地图于2020年10月上线红绿灯倒计时功能，支持实时读秒预判，导航会在接近红绿灯路口时，自动展示倒计时剩余秒数，让用户时刻掌握前方路况。截至2022年12月31日，红绿灯倒计时

如何从 Windows 11 中的右键单击上下文菜单中删除“在 Windows 终端中打开”选项 Apr 13, 2023 pm 06:28 PM

默认情况下，Windows 11 右键单击上下文菜单有一个名为Open in Windows Terminal的选项。这是一个非常有用的功能，允许用户在特定位置打开 Windows 终端。例如，如果您右键单击一个文件夹并选择“在 Windows 终端中打开”选项，则 Windows 终端将启动并将该特定位置设置为其当前工作目录。尽管这是一个了不起的功能，但并不是每个人都发现此功能的用途。一些用户可能只是不希望在他们的右键单击上下文菜单中使用此选项，并且希望将其删除以整理他们的右键单击上下文菜

See all articles

基于css3的属性transition制作菜单导航的效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题