纯css代码写旋转动画

时间：2023-03-09 18:18:47
纯css代码写旋转动画 
<!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>

　　

相关文章