<!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. Struts2的标签库（二）——OGNL表达式

    Struts2的标签库(二) --OGNL表达式 1.Struts2中的OGNL表达式增加了ValueStack的支持. 注:ValueStack--实际上是一个容器对象,该对象在启动Struts2框 ...

  2. VFL +AutoLayout

    横竖屏事件响应(viewWillLayoutSubviews和通知)两种方式 http://blog.csdn.net/nogodoss/article/details/17246489 一,NSLa ...

  3. CodeForces 219B Special Offer! Super Price 999 Bourles!

    Special Offer! Super Price 999 Bourles! Time Limit:1000MS     Memory Limit:262144KB     64bit IO For ...

  4. UML分析与设计

    考点: 掌握面向对象的分析与设计 掌握UML描述方法 用例图.类图.序列图.状态转换图 类图:类的属性.方法的识别:类间的各种关系 类图:实体.联系 各种关系图例: 泛化:取公共属性 关联分为聚合.组 ...

  5. 8.mybatis动态SQL模糊查询 (多参数查询，使用parameterType)

    多参数查询,使用parameterType.实例: 用户User[id, name, age] 1.mysql建表并插入数据 2.Java实体类 public class User { public ...

  6. Deep Learning: Activation Function

    Sigmoid Function ReLU Function Tanh Function

  7. Codeforces Round #379 (Div. 2) E. Anton and Tree 树的直径

    E. Anton and Tree time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  8. 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  9. poj1113Wall(凸包）

    链接 顺便整理出来一份自己看着比较顺眼的模板 #include <iostream> #include<cstdio> #include<cstring> #inc ...

  10. 手动配置WCF宿主的.config文件遇到的几种错误

    今天尝试用控制台应用程序作为WCF宿主,遇到几个问题,这几个问题虽然都不难,但寻找解决方案相当费时费力,做记录. WCF标准的配置文件为: <system.serviceModel>    ...