css3實現旋轉小三角動畫
阿新 • • 發佈：2019-02-07
<!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>
<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>