css3实现旋转⼩三⾓动画<!DOCTYPE html>
js控制css3动画触发
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。