<!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. merge into的用法

    merge into 是英文的一个短语,意思是汇入,合并.顾名思义,merge into是合并了insert和update操作,其执行效率要高于分别单独执行insert和update语句. //创建表 ...

  2. linux、windows下导入、导出mysql数据库命令

    一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1.导出数据和表结构:[不是mysql里的命令]mysqldump -u用户名 -p密码 数据库名 > 数据 ...

  3. MySQL做练习时总结的一些知识点

    MySQL做练习时总结的一些知识点     0:mysql有三种注释方法 上午插入记录的时候一直没有成功,郁闷不知道为什么.因为是很多条记录一起插入,中间一些不用的数据就用"--" ...

  4. Margin and Padding in Windows Forms Controls

    https://msdn.microsoft.com/en-us/library/ms229627.aspx Margin and Padding Precise placement of contr ...

  5. 重命名myclipse中web项目名称的过程

    1 打开 myclipse2 最顶层项目上右键,Refactor,新名,3 最顶层项目上右键,propterties, MyEclipse, Web, context-root: /新名4 替换 .c ...

  6. [HRBUSTOJ1476]Pairs（FFT）

    题目链接:http://acm-software.hrbust.edu.cn/problem.php?id=1476 题意:给n个数,m次询问,每次询问一个k.问n个数里两数之和严格小于k的数对. 根 ...

  7. Oracle 怎么让id自增加

    --自增长序列 create table test( tid int not null, tname ), tsex ), tbz ) ) --添加主键约束 alter table test add ...

  8. Java Web表达式注入

    原文:http://netsecurity.51cto.com/art/201407/444548.htm 0×00 引言 在2014年6月18日@终极修炼师曾发布这样一条微博: 链接的内容是一个名为 ...

  9. Maven 3.3.9在Windows上的安装

    开始学Maven了,可是我一个项目都木有做过.听过Maven 的大名,用来构建项目的. 下面记录下我安装Maven的过程 1.确认电脑上安装了JDK 在cmd下执行下列命令: java –versio ...

  10. SVN 的使用

    文件夹上的符号有什么意义?? 黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许 ...