淘宝导航小箭头翻转效果
淘宝网站小箭头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/
加支付宝好友偷能量挖...