您的位置：首页 > Web前端 > CSS

css3实现旋转小三角动画

2013-04-07 14:19 645 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航