纯css代码写旋转动画-CSDN博客

<!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>
转载于:https://www.cnblogs.com/MissBean/p/4354070.html