注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

【译】CSS3效果 -- CSS3 multicolor menu  

2012-06-19 17:33:29|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果:http://jsfiddle.net/hszy00232/NyAeb/


HTML:

<header>
<h2>CSS3 multicolor menu</h2>
<a href="#" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<span id="red"></span>
<span id="orange"></span>
<span id="pink"></span>
<span id="green"></span>
<span id="blue"></span>
<span id="indigo"></span>
<span id="violet"></span>
<span id="grey"></span>
<div class="colorScheme">
<a href="#red" class="red"></a>
<a href="#orange" class="orange"></a>
<a href="#pink" class="pink"></a>
<a href="#green" class="green"></a>
<a href="#blue" class="blue"></a>
<a href="#indigo" class="indigo"></a>
<a href="#violet" class="violet"></a>
<a href="#grey" class="grey"></a>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="hsubs">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#" class="hsubs">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
</ul>
</li>
<li><a href="#" class="hsubs">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Back</a></li>
</ul>
</div>

CSS:

*{margin:0;padding:0;}
body{font:14px/1.3 Arial,sans-serif;}
ul,li{list-style:none;}
header{display:block;width:100%;height:70px;color:#fff;position:relative;background-color:#212121;box-shadow:0 -1px 2px #111;}
header h2{position:absolute;width:540px;padding:22px 0;font-size:22px;font-weight:normal;left:50%;margin-left:-400px;}
header a.stuts,
header a.stuts:visited{position:absolute;top:0;left:50%;margin:23px 0 0 110px;font-size:14px;line-height:31px;color:#fcfcfc;text-decoration:none;}

.container{width:750px;height:400px;padding:15px;margin:30px auto;background-color:#eee;border-radius:5px;}
.colorScheme{width:320px;height:32px;margin:0 auto 25px;}
.colorScheme a{float:left;width:30px;height:30px;margin:0 5px;cursor:pointer;}
.colorScheme .red{background-color:red;}
.colorScheme .orange{background-color:orange;}
.colorScheme .pink{background-color:pink;}
.colorScheme .green{background-color:green;}
.colorScheme .blue{background-color:blue;}
.colorScheme .indigo{background-color:indigo;}
.colorScheme .violet{background-color:violet;}
.colorScheme .grey{background-color:grey;}

#nav{position:relative;padding:10px;display:table;background-color:#000;border-radius:5px;box-shadow:3px 3px 3px rgba(0,0,0,0.5);}
#nav ul{position:absolute;padding:20px 0 10px;left:-9999px;top:-9999px;overflow:hidden;background-color:red;border:1px solid red;border-radius:0 5px 5px 5px;
-webkit-transform:scaleY(0);
-moz-transform:scaleY(0);
-ms-transform:scaleY(0);
-o-transform:scaleY(0);
transform:scaleY(0);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transition:-webkit-transform 0.1s linear;
-moz-transition:-moz-transform 0.1s linear;
-ms-transition:-ms-transform 0.1s linear;
-o-transition:-o-transform 0.1s linear;
transition:transform 0.1s linear;
}

#nav li{float:left;position:relative;}
#nav li a{display:block;padding:7px 20px;font-size:16px;color:#fff;text-decoration:none;}
#nav li:hover > a{border-radius:5px;color:#fff;background-color:red;}
#nav li:hover > a.hsubs{border-radius:5px 5px 0 0;}
#nav li:hover ul.subs{left:0;top:34px;width:180px;
-webkit-transform:scaleY(1);
-moz-transform:scaleY(1);
-ms-transform:scaleY(1);
-o-transform:scaleY(1);
transform:scaleY(1);
}

#nav ul li{width:100%;}
#nav ul li:hover > a{border-radius:5px;background-color:#222!important;}

#red:target ~ #nav ul{background-color:red;border:1px solid red;}
#orange:target ~ #nav ul{background-color:orange;border:1px solid orange;}
#pink:target ~ #nav ul{background-color:pink;border:1px solid pink;}
#green:target ~ #nav ul{background-color:green;border:1px solid green;}
#blue:target ~ #nav ul{background-color:blue;border:1px solid blue;}
#indigo:target ~ #nav ul{background-color:indigo;border:1px solid indigo;}
#violet:target ~ #nav ul{background-color:violet;border:1px solid violet;}
#grey:target ~ #nav ul{background-color:grey;border:1px solid grey;}

#red:target ~ #nav li:hover>a{background-color:red;}
#orange:target ~ #nav li:hover>a{background-color:orange;}
#pink:target ~ #nav li:hover>a{background-color:pink;}
#green:target ~ #nav li:hover>a{background-color:green;}
#blue:target ~ #nav li:hover>a{background-color:blue;}
#indigo:target ~ #nav li:hover>a{background-color:indigo;}
#violet:target ~ #nav li:hover>a{background-color:violet;}
#grey:target ~ #nav li:hover>a{background-color:grey;}

个人分析:

一.CSS3属性 transform
 transform:none|rotate(旋转)|scale(缩放)|skew(扭曲)|translate(移动)|matrix(矩阵)
 none:无转换
 rotate(<angle>):指定对象的2D rotation(2D 旋转),需先设置transform-origin属性
 scale(<number>[,<number>]):指定对象的2D scale(2D 缩放)。第1个参数对应X轴,第2个参数对应Y轴。如果第二个参数未提供,则  默认取第1个参数的值 
 scaleX(<number>):指定对象X轴的(水平方向)缩放,值为倍数
 scaleY(<number>):指定对象Y轴的(垂直方向)缩放,值为倍数
 skew(<angle>[,<angle>]):指定对象skew transformation(斜切扭曲)。第1个参数对应X轴,第2个参数对应Y轴。如果第2个参数未提  供,则默认为0
 skewX(<angle>):指定对象X轴的(水平方向)扭曲
 skewY(<angle>):指定对象Y轴的(垂直方向)扭曲
 translate(<length>[,<length>]):指定对象的2D translation(2D平移)。第1个参数对应X轴,第2个参数对应Y轴。如果第2个参数未提  供,则默认为0
 translateX(<length>):指定对象X轴的(水平方向)平移
 translateY(<length>):指定对象Y轴的(垂直方向)平移
 matrix(<number>,<number>,<number>,<number>,<number>,<number>):以一个含6值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变  换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
 
 浏览器兼容:IE(9.0以下)、Firefox(4.0-9.0)、Safari(5.1)、Chrome(13.0-16.0)、Opera(11.50-11.60)




  评论这张
 
阅读(511)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017