<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>css3</title>

</head>

<style type="text/css">

  *{

    margin: 0;

    padding:0;

  }

  body{background: #eee;font-family: '微软雅黑';}

  ul li{list-style: none;}

  .nav{

    width: 1110px;

    height: 260px;

    margin: 20px auto;

  }

  .nav li {

    float: left;

    width:230px;

    height: 230px;

    margin-right:5px;

    border-radius: 50%;

    border:10px solid #f6f6f6;

    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);

    overflow: hidden;

    background: #fff;

    -webkit-transition:all .8s ease;

    -moz-transition:all .8s ease;

    -ms-transition:all .8s ease;

    -o-transition:all .8s ease;

    transition:all .8s ease;

  }

  .n_img{

    display: block;

    text-align: center;

    margin-top: 35px;

    margin-bottom: 10px;

  }

  .n_img img{

    width: 70px;

    height: 70px;

    -webkit-transition:all .8s ease;

    -moz-transition:all .8s ease;

    -ms-transition:all .8s ease;

    -o-transition:all .8s ease;

    transition:all .8s ease;

  }

  .text{opacity: 0.5;text-align: center;font-size: 12px;}

  .text h2{font-size: 20px;}

  .nav li:hover{

    background: #eee;

    box-shadow: 0 2px 3px #000;

    -webkit-transform:rotate(360deg);

    -moz-transform:rotate(360deg);

    -ms-transform:rotate(360deg);

    -o-transform:rotate(360deg);

    transform:rotate(360deg);

  }

  .nav li:hover .n_img img{

    -webkit-transform:scale(1.8,1.8);

    -moz-transform:scale(1.8,1.8);

    -ms-transform:scale(1.8,1.8);

    -o-transform:scale(1.8,1.8);

    transform:scale(1.8,1.8);

  }

  .nav li:hover .text{

    opacity: 1;

    color: #252525;

    margin-top: 30px;

  }

  .nav li:hover .text h2{

    font-size: 26px;

  }

</style>

<body>

  <div class="nav">

    <ul>

      <li>

        <span class="n_img"><img src="data:images/1.png"></span>

        <div class="text">

          <h2>讲师介绍</h2>

          <p>css3鼠标滑过内容旋转</p>

        </div>

      </li>

      <li>

        <span class="n_img"><img src="data:images/2.png"></span>

        <div class="text">

          <h2>修改作业</h2>

          <p>css3鼠标滑过内容旋转</p>

        </div>

      </li>

      <li>

        <span class="n_img"><img src="data:images/3.png"></span>

        <div class="text">

          <h2>通过考试</h2>

          <p>css3鼠标滑过内容旋转</p>

        </div>

      </li>

      <li>

        <span class="n_img"><img src="data:images/4.png"></span>

        <div class="text">

          <h2>领取证书</h2>

          <p>css3鼠标滑过内容旋转</p>

        </div>

      </li>

    </ul>

  </div>

</body>

</html>

　　

纯css代码写旋转动画的更多相关文章

  1. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  2. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  3. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  4. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  5. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  6. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  7. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  8. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  9. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

随机推荐

  1. GMT时间转换

    /// <summary> /// GMT时间转成本地时间 /// </summary> /// <param name="gmt">字符串形式 ...

  2. uTenux——HelloWord

    由以上几节的学习,我们从这一节开始真正的以实例讲解uTenux\AT91SAM3S4C开发套件的应用.如其他的软件程序开发一样,uTenux\AT91SAM3S的学习我们也要从第一个程序代码-Hell ...

  3. 1，linux基础知识以及新建虚拟机

    1,Windows图形界面只是在个人电脑上普及(dos界面):lunix是在服务器领域,服务器上绝对不出现图形化界面(命令行). 2,2.6.18  主板本,次版本,末版本 如果末版本积累到一定程序就 ...

  4. factory工厂模式之简单工厂SimpleFactory

    简单工厂(Simple Factory) 又叫静态工厂,是工厂模式三中状态中结构最为简单的.1.主要有一个静态方法,用来接受参数,并根据参数来决定返回实现同一接口的不同类的实例.2.或者针对每个产品, ...

  5. Python基础学习笔记（五）常用字符串内建函数

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-strings.html 3. http://www.liaoxu ...

  6. android上让我放弃使用wstring来操作中英文字符串 转

    android上让我放弃使用wstring来操作中英文字符串 2013-08-07 16:37:24|  分类: cocos2d|举报|字号 订阅     项目需要,需要对中英文字符串进行遍历修改等, ...

  7. iBATIS sql（XML）中的大于、小于、like等符号写法

    其实就是xml的特殊符号,因为它的配置就是xml,所以可以用下面这种写法转义 <          <     >          >      <>   < ...

  8. More Effective C++ (2)

    接下来的是more effective c++ 11至20条款: 11.禁止异常信息(exceptions)传递到析构函数外.析构函数的调用情况可能有两种:(1)对象正常销毁 (2)异常传播过程中的栈 ...

  9. iOS - Swift SingleClass 单例类

    前言 单例对象能够被整个程序所操作.对于一个单例类,无论初始化单例对象多少次,也只能有一个单例对象存在,并且该对象是全局的,能够被整个系统访问到. 单例类的创建 1.1 单例类的创建 1 单例类的创建 ...

  10. iOS - Swift NSNull 空值

    前言 public class NSNull : NSObject, NSCopying, NSSecureCoding 作为占据空间的一个空值,如用在数组或字典中占据一个没有任何值的空间. 1.NS ...