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

CSS实现旋转标签

2014-04-19 20:32 465 查看
最近在写移动端页面时发现页面左上角的一个旋转的标签，当时考虑到兼容性问题就没有用css3的方法去实现，直接截取了图片。之后发现原来ie的滤镜也可以实现这样的效果，可以实现兼容，于是网上查找资料后实现了一下：

实现效果如下：



实现代码如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#sources{
background-color: #333;
color: #fff;
font: bold 14px/28px georgia,sans-serif;
text-align: center;
width: 200px;
height: 28px;
display: block;
}
/*主要样式*/
#sources{
position: fixed; /*ie6不支持*/
top: 0;
left: 0;

_position: absolute; /*ie6 hack*/
top: -20px\9;/*ie6 hack*/
left: -20px\9;/*ie6 hack*/

/*transform 指定平移及旋转角度，具体查看css手册*/
-moz-transform: translate(-40px,45px) rotate(-45deg);
-webkit-transform: translate(-40px,45px) rotate(-45deg);
-o-transform: translate(-40px,45px) rotate(-45deg);
transform: translate(-40px,45px) rotate(-45deg);

-moz-box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff; /*逗号分隔表示多组效果*/
box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.1);
/*ie滤镜-矩阵*/
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6);
}
</style>
</head>

<body>
<section>
<a id="sources" href="#" title="css 旋转效果">CSS旋转效果</a>
</section>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航