码迷,mamicode.com
首页 > Web开发 > 详细

纯css代码写旋转动画

时间:2015-03-20 18:31:49      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

<!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="images/1.png"></span>
        <div class="text">
          <h2>讲师介绍</h2>
          <p>css3鼠标滑过内容旋转</p>
        </div>
      </li>
      <li>
        <span class="n_img"><img src="images/2.png"></span>
        <div class="text">
          <h2>修改作业</h2>
          <p>css3鼠标滑过内容旋转</p>
        </div>
      </li>
      <li>
        <span class="n_img"><img src="images/3.png"></span>
        <div class="text">
          <h2>通过考试</h2>
          <p>css3鼠标滑过内容旋转</p>
        </div>
      </li>
      <li>
        <span class="n_img"><img src="images/4.png"></span>
        <div class="text">
          <h2>领取证书</h2>
          <p>css3鼠标滑过内容旋转</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

  

纯css代码写旋转动画

标签:

原文地址:http://www.cnblogs.com/MissBean/p/4354070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!