基于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+jq创作含苞待放的荷花
Feb 20 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 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
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
详解Python中的分支和循环结构
2020/02/11 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
社区春季防火方案
2014/06/02 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
英语导游欢迎词
2015/09/30 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
python实现双向链表原理
2022/05/25 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android