.nav_all { position:relative; z-index:; width:172px; display:inline; float:left; *zoom:; }
.nav_all b { display:block; font-size:16px; text-align:left; color:#fff; padding: 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:% %;
-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:; border:1px solid #f90; border-top:none; box-shadow:0px 0px 3px #f60;}
.nav_all_box1 dl { position:relative; z-index:; float:left; }
.nav_all_box1 dl dt { padding:10px 15px; /*大框架背景宽度*/width:140px; color:#ccc; position:relative; z-index:; 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:#; }
.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: 20px 20px 0px; /*子框架宽度*/width:477px; position:absolute; /*子框架边框*/left:170px; top:; z-index:; 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:; 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);
}

CSS3 图片旋转的更多相关文章

  1. CSS3图片旋转特效

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. css3图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. html5+css3图片旋转特效

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  4. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  6. CSS3动画旋转——(图片360°旋转)

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  7. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  8. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  9. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

  1. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  2. 利用shell监控cpu、磁盘、内存使用率

    利用shell监控cpu.磁盘.内存使用率,达到警报阈值发邮件进行通知 并配合任务计划,即可及时获取报警信息 #!/bin/bash ################################# ...

  3. .NET-使用NPOI组件将数据导出Excel-通用方法

    一.Excel导入及导出问题产生: 从接触.net到现在一直在维护一个DataTable导出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题:导出问题: 如果是asp.net,你 ...

  4. HUD Text 学习

    使用版本 NGUI_HUD_Text_v1.11 .英语水平差,难免有很多不足之处,忘批评指正.本文为鬼脸苹果原创 HUD Text 的其中一个用途是,涉及到非战斗场景时,你能通过在角色头顶显示文本行 ...

  5. Rust 格式输出

    格式输出由一系列定义在 std::fmt 中的宏提供. 包含: format! : 输出格式化的字符串. print!  : 输出格式化的字符串到控制台(终端)println!: 添加一个换行,输出格 ...

  6. Android provider中使用sqlite内存数据库

    sqlite是支持内存数据库的,在Android中,我们可以通过provider实现内存数据库操作.内存数据库的优点,访问速度快,但在连接关闭后,数据库自动消失(在android中的表现是,provi ...

  7. SQL Server 之 与 OVER() 函数

    在SQL SERVER 2005/2008支持两种排名开窗函数和聚集开窗函数. 一. OVER() 函数 语法结构:OVER( [ PARTITION BY ... ] [ ORDER BY ... ...

  8. itext处理pdf

    http://www.java2s.com/Tutorial/Java/0419__PDF/DecryptPdffile.htm

  9. javascript 内置类型

    JavaScript有七种内置类型: 空类型:null 未定义:undefined 布尔:boolean 数字:number 字符串:string 对象:object 符号:symbol(ES6新增) ...

  10. C# : 连接SDE空间数据库时出错

    1.SDE认证问题:使用ArcGIS.KeyGen.exe生成一个epp文件方法:-->server-->All-->拷贝并保存为*.epp文件.认证时加载该文件即可认证完毕.2.实 ...