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


Posted in HTML / CSS onSeptember 01, 2015

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

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

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

复制代码
代码如下:
<!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>

希望本文所述对大家的css3网页设计有所帮助。

HTML / CSS 相关文章推荐
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 #HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 #HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 #HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 #HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 #HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 #HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
You might like
咖啡的种类和口感
2021/03/03 新手入门
PHP实现分页的一个示例
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
一分钟理解js闭包
2016/05/04 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python timeit模块的使用实践
2020/01/13 Python
Python如何重新加载模块
2020/07/29 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
优秀共产党员先进事迹材料
2014/05/06 职场文书
松材线虫病防治方案
2014/06/15 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
跑吧孩子观后感
2015/06/10 职场文书
茶花女读书笔记
2015/06/29 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js