CSS3 图片旋转
2015-10-13 22:28
621 查看
.nav_all { position:relative; z-index:10001; width:172px; display:inline; float:left; *zoom:1; } .nav_all b { display:block; font-size:16px; text-align:left; color:#fff; padding:0 15px; height:46px; line-height:46px; background:#f90; } .nav_all b i { float:right;display:inline-block; margin-left:10px; width:16px; height:46px; line-height:46px; background:url(../images/nav_all.gif) center center no-repeat; -moz-transform-origin:50% 50%; -webkit-transition:-webkit-transform .3s ease-in; -moz-transition:transform .3s ease-in; -o-transition:transform .3s ease-in; transition:transform .3s ease-in;} .nav_all_box1 { display:none;/*大框架边框*/ width:170px; position:absolute; left:0px; top:46px; z-index:10002; border:1px solid #f90; border-top:none; box-shadow:0px 0px 3px #f60;} .nav_all_box1 dl { position:relative; z-index:10003; float:left; } .nav_all_box1 dl dt { padding:10px 15px; /*大框架背景宽度*/width:140px; color:#ccc; position:relative; z-index:10005; background:url(../images/jt_12.gif)/*背景图标left距离*/ 150px 16px no-repeat #fff; border-top:1px solid #fff; border-bottom:1px solid #fff;} .nav_all_box1 dl dt a { color:#666; } .nav_all_box1 dl dt a:hover { color:#f90; text-decoration:underline; } .nav_all_box1 dl dd a { color:#06c; } .nav_all_box1 dl dd a:hover { color:#f90; text-decoration:underline; } .nav_all_box1 dl dt:first { font-size:18px;} .nav_all_box1 dl dd { display:none; padding:0 20px 20px 0px; /*子框架宽度*/width:477px; position:absolute; /*子框架边框*/left:170px; top:0; z-index:10004; background:#fff; border:1px solid #f90; height:auto !important; min-height:200px; height:200px; box-shadow:0px 0px 3px #f60; } .nav_all_box1 dl.last dd { bottom:0; top:auto; _margin-bottom:-1px;} div.nav_all_on b { background:#f90; box-shadow:0px 0px 3px #f60;} div.nav_all_on b i { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); }
相关文章推荐
- 超链接访问过后hover样式就不出现的问题
- css的伪类说明
- html+css2次学习----a链接的href属性的使用
- DIV+CSS设计IE6浮动产生双倍距离
- html+css2次学习-----常用知识点总结
- css 样式赶紧来look
- CSS 绝对定位属性absolute用法初探
- 剖析CSS relative相对定位用法
- CSS设置文字样式——模拟Google
- 表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)
- 使用CSS实现下拉菜单的动态显示
- 使用CSS和HTML编写一个基本的Web框架
- css预处理器(less学习笔记)
- css随记01编辑技巧,背景与边框
- dialog样式的activity,可全屏、可任意大小的dialog实现
- css技巧
- Flex 布局教程:实例篇
- week6---10月14日 CSS样式(二)
- css滚动回弹样式
- 从事前端开发必须要了解的CSS原理