.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. LaTeX绘图宏包 Pgfplots package

    Pgfplots package The pgfplots package is a powerful tool, based on tikz, dedicated to create scienti ...

  2. django的过滤和搜索排序功能django-filter

    参考: 1.https://django-filter.readthedocs.io/en/master/guide/usage.html#the-filter 2.https://www.cnblo ...

  3. Qt 事件处理机制 (下篇)

    继续我们上一篇文章继续介绍,Qt 事件处理机制 (上篇) 介绍了Qt框架的事件处理机制:事件的产生.分发.接受和处理,并以视窗系统鼠标点击QWidget为例,对代码进行了剖析,向大家分析了Qt框架如何 ...

  4. wsgi & cgi的一些概念解释

    可以看这里 https://www.zhihu.com/question/19998865 如何理解 CGI, WSGI?修改 写补充说明 举报 添加评论 分享 • 邀请回答 默认排序 按时间排序 1 ...

  5. Python写的简陋版一对一聊天工具,全双工

    好该睡觉了,明天还要上班~~~直接上代码,后面再总结 import threading import os import socket def RecvProcess ( UDP_Socket, Lo ...

  6. 循环栅栏:CyclicBarrier(司令要求任务) 读书笔记

    可以理解为循环栅栏,栅栏就是一种障碍物.假如我们将计数器设置为10,那么凑齐第一批10个线程后,计数器就会归零,然后接着凑齐下一批10个线程,这就是循环栅栏的含义. 构造器: public Cycli ...

  7. HTTP请求头 If-Modified-Since

    来自:http://www.jm47.com/g/91174.htm 一直以来没有留意过HTTP请求头的IMS(If-Modified-Since)标签. 最近在分析Squid的access.log日 ...

  8. QtGui.QPen

    The QtGui.QPen is an elementary graphics object. It is used to draw lines, curves and outlines of re ...

  9. MySQL数据库和实例简介

    MySQL 单进程多线程,也就是说MySQL实例在系统上表现就是一个进程 该架构类似于SQL Server和Windows版本的Oracle MySQL数据库是由一些列物理文件组成.类似于frm.MY ...

  10. CSS命名规范 BEM

    良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...