<!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. MySQL基础（五）——视图

    MySQL基础(五)--视图

  2. Python3基础 if-else实例 判断输入的数字是否为8

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. SqlSever基础 len函数 返回一个字符串的长度

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. #utf-8与gbk转换 #bytes 和str 的转换

    #!/user/bin/env python # -*- coding:utf-8 -*- temp = "连接" temp_unicode = temp.decode('utf- ...

  5. js获取鼠标位置

    1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...

  6. HDU 5046 Airport(dlx)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5046 题意:n个城市修建m个机场,使得每个城市到最近进场的最大值最小. 思路:二分+dlx搜索判定. ...

  7. 记一次MySql入库后，文本出现乱码的问题

    最近采用ADO.NET开发了一个工具,解析了一条如下的日志并入库(MySql) -- :: [INFO] roleName=♣丶伊诺,orderId=,price= 发现入库后的roleName中的♣ ...

  8. ubuntu vi/vim编辑器必知必会

    转载出处:http://blog.csdn.net/xiajun07061225/article/details/7039413 一.我们为什么要学习vim编辑器? Linux的命令行界面下面有非常多 ...

  9. Creating HTML table with vertically oriented text as table header 表头文字方向

    AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...

  10. @RequestMapping测试各种访问方式

    这里访问WEB-INF目录下的页面,这个还不知道有没有类似struts2那样的通配符来可以访问不同的action,不同的method,不同 的页面,用户则很爽,有的话求告知,而且我还有一个问题就是配置 ...