CSS3 图片旋转
.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 图片旋转的更多相关文章
- CSS3图片旋转特效
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- css3图片旋转
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- html5+css3图片旋转特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- CSS3动画旋转——(图片360°旋转)
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- Rotating Image Slider - 图片旋转切换特效
非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
随机推荐
- H.264远程视频监控系统
由usb摄像头驱动,h264编码库,采集read_video,传输,客户端显示组成 读取摄像头数据缓冲区是否有帧数据收到,有数据收到就读取数据并进行H264编码,把数据发送到socket发送到客户端. ...
- oracle汉字转拼音
CREATE OR REPLACE FUNCTION F_PINYIN(P_NAME IN VARCHAR2) RETURN VARCHAR2 AS V_COMPARE VARCHAR2(100); ...
- VC++多线程--进程间通信
1.邮槽 邮槽是windows系统提供的一种单向通信的机制,邮槽能传输的数据非常小,一般在400k左右. 创建邮槽 HANDLE CreateMailslot( LPCTSTR lpName, //指 ...
- (顺序表应用5.1.1)POJ 3750 小孩报数问题(基本的约瑟夫环问题:给出人数n,出发位置w,间隔数s)
/* * POJ_3750.cpp * * Created on: 2013年10月30日 * Author: Administrator */ #include <iostream> # ...
- CSS3-border-radius 属性
向 div 元素添加圆角边框: div { border:2px solid; border-radius:25px; } IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Op ...
- PHP中多IP段权限控制方案
在某些项目中我们可能会用到根据IP段进行权限校验,比如不在我们配置的IP段内的用户访问某些页面或功能模块时,将提示其权限不够并禁止访问该页面的内容.鉴于项目中需求各异,下面只说下大致思路以及我个人的实 ...
- CSS兼容性解决方法!important的IE7,Firefox问题
转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...
- C#应用视频教程1.4 实现完整以太网通讯
对于事件和委托机制不够理解的读者可以参考本节提供的委托相关的范例程序,这个是控制台的程序,比较简洁(书店发布一本书的事件注册到某个读者A身上,原理跟前面一小节讲的是一致的,只不过没有通过委托对外发送数 ...
- [Linux]vbox 虚拟机加入新磁盘
情况是这种,開始创建虚拟机的时候硬盘设置太小了.仅仅有10g,我如今通过vbox的设置给这个linux(centos6.6)虚拟机加入了一块硬盘. 以下的操作就是怎么把硬盘挂载到系统中. 通过 fdi ...
- 无法加载Dll”ArcGISVersion.dll”:0x8007007E
在Win7x64位环境下,无法加载Dll"ArcGISVersion.dll":找不到指定的模块 解决方案: 打开项目的属性-生成-常规-目标平台,选择X86. 参考:http:/ ...