CSS3仿淘宝旋转小箭头

这两天在学习CSS3，觉得挺好玩的。让我想起淘宝上旋转的小箭头，http://ued.taobao.com/blog/2010/05/05/css3-animation/这里有源码，不过我看着好像挺复杂的，于是试着自己做一个。出来的效果跟原效果的差别之一是：鼠标离开后没有往回旋转的效果。不过刚开始学习，暂时先这样吧。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>CSS3仿淘宝旋转小箭头</title>
 6 <style type="text/css">
 7 body {
 8     font-size:12px;
 9 }
10 a { color:#333; text-decoration:none; }
11 .menu {    width:80px;    line-height:25px; border:#ddd solid 1px; }
12 .menu a { position:relative; width:70px; height:25px; display:block; padding-left:10px; }
13 .menu a b {
14     border-width:4px 4px 0px 4px;
15     border-color:transparent;
16     border-style:solid;
17     border-top-color:#333;
18     width:0; height:0; position:absolute; top:10px;    left:63px;
19 }
20 .menu a:hover b {
21     -moz-animation:rotation 0.5s 1;
22     -webkit-animation:rotation 0.5s 1;
23     animation:rotation 0.5s 1;
24     border-width:0px 4px 4px 4px;
25     border-bottom-color:#333;
26 }
27 @-moz-keyframes rotation {
28     0% { -moz-transform:rotate(180deg); }
29     100%{ -moz-transform:rotate(360deg); }
30 }
31 @-webkit-keyframes rotation {
32     0% { -webkit-transform:rotate(180deg); }
33     100% { -webkit-transform:rotate(360deg); }
34 }
35 @keyframes rotation {
36     0% { transform:rotate(180deg); }
37     100% { transform:rotate(360deg); }
38 }
39 </style>
40 </head>
41 <body>
42     <div class="menu"><a href="#">我的淘宝<b></b></a></div>
43 </body>
44 </html>
posted @ 2012-06-15 15:09  长风freedom  阅读(2877)  评论(0)  编辑  收藏  举报