1. 程式人生 > >css3實現旋轉小三角動畫

css3實現旋轉小三角動畫

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box-sizing</title>
<style>
  i{font-weight:500;
    font-style:normal;
   }
  .hitme {
          display:block;
          line-height:22px;
          height:22px;
          overflow:visible;
          padding:0px 15px;
          font-size:14px;
          width:40px;
          position:relative;            
      }
 
      .hitme i{
          border-color: transparent transparent #626262 transparent;
        border-style: solid;
        border-width: 0px 4px 4px 4px;
        _border-style:solid dotted;
        position:absolute;
        top:10px;
        right:10px;             
        width:0px;
        height:0px;
        zoom:1;
        -webkit-transition: -webkit-transform 0.2s ease-in;
        -moz-transition:    -moz-transform 0.2s ease-in;
        -o-transition:      -o-transform 0.2s ease-in;
        transition:         transform 0.2s ease-in;
      }
      
      .addMe i,.hitme:hover i{          
          -moz-transform:           rotate(180deg);      
        -webkit-transform:        rotate(180deg);       
        -o-transform:             rotate(180deg);       
        transform:                rotate(180deg);       
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
      }
    
</style>
<script type="text/javascript"  src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(function(){
   
       $('a.hitme').hover(function(){                       
        $(this).addClass('addMe');
    },function(){
        $(this).removeClass('addMe');
    })
       
   })
    
</script>
</head>

<body>
    
  <a class="hitme">點選<i></i></a>
</body>
</html>