<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
b{
position:absolute;
right:10px;
top:7px;
width:0;
height:0;
border-width:4px 4px;
border-style:solid;
border-color:#666 #f5f5f5 #f5f5f5;
font-size:0;
line-height:0;
-webkit-transition:-webkit-transform .2s ease-in;
-webkit-backface-visibility:hidden;
-moz-transition:-moz-transform .2s ease-in;
-o-transition:-o-transform .2s ease-in;
transition:transform .2s ease-in;
}
b:hover{
border-color:#666 #fff #fff #fff;
-moz-transform:rotate(180deg);
-moz-transform-origin:50% 30%;
-webkit-transform:rotate(180deg);
-webkit-transform-origin:50% 30%;
-o-transform:rotate(180deg);
-o-transform-origin:50% 30%;
transform:rotate(180deg);
transform-origin:50% 30%;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
top:3px;
}
</style>
</head>
<body>
<p><b></b><br />
</p>
</body>
</html>纯CSS实现箭头旋转
最新推荐文章于 2024-05-28 15:41:28 发布
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
