淘宝导航小箭头翻转效果

  淘宝网站小箭头css3动画效果源代码,请使用webkit/Gecko核心浏览器运行示例查看效果

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>css3 animation demo @ taobao - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://fiddle.jshell.net//js/lib/mootools-1.2.4-core-nc.js'></script>
  
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net//css/normalize.css">
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net//css/result-light.css">
  
  <style type='text/css'>
    
  </style>
  
<script type='text/javascript'>//<![CDATA[ 
//]]>  
</script>
</head>
<body>
  <style>
    div {
        float: left;
        margin: 100px;
        position: relative;
        padding-right: 36px;
        font-size: 22px;
        cursor: pointer;
    }
    div b {
        position: absolute;
        right: 0;
        top: 5px;
        
        border-width: 14px 14px;
        border-style: solid;
        border-color: #1f3d99 #fff #fff #fff;
        width: 0;
        height: 0;
        font-size: 0;
        line-height: 0;
        -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;
    }
    div:hover b,
    div.hover b {
        -moz-transform:           rotate(180deg);
        -moz-transform-origin:    50% 20%;
        -webkit-transform:        rotate(180deg);
        -webkit-transform-origin: 50% 20%;
        -o-transform:             rotate(180deg);
        -o-transform-origin:      50% 20%;
        transform:                rotate(180deg);
        transform-origin:         50% 20%;
        
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        top:    -8px/9;
    }
</style>
<div id="test">
    my taobao
    <b></b>
</div>
<script>
    var ua = navigator.userAgent,
        m,
        ie = 0,
        el = document.getElementById('test');
    if ((m = ua.match(/MSIE\s([^;]*)/)) && m[1]) {
        ie = m[1];
    }
    if (ie && el) {
        el.onmouseenter = function() {
            this.className = 'hover';
        };
        el.onmouseleave = function() {
            this.className = '';
        };
    }
</script>
  
</body>
</html>

来源:http://fiddle.jshell.net/pjRVT/show/light/

加支付宝好友偷能量挖...


评论(0)网络
阅读(388)喜欢(0)HTML/CSS兼容/XML