50求财付通首页上的箭头背景动画animate实现方法
日期：2014-05-16 浏览次数：20702 次
50求财付通主页上的箭头背景动画animate实现方法
地址在这：https://www.tenpay.com/v2/index.shtml
还没搞清他们是怎么实现的，求大神指点，我在网上查了一下，好像是要用到animate的jquery插件，我想问有没有不用插件就可以实现这个箭头顺时针的方法呢？
背景图片在这：
------解决方案--------------------
是不是类似这样的效果？
使用CSS3可以。只是有些浏览器不支持CSS3的话，就。。。
------解决方案--------------------
这么比喻吧，你父元素的class=a
这个元素下，有文字，和那个图标。
图标的class=b
之前是把hover放在b上面的：b:hover
你把hover放在a上，就可以实现你3楼说的问题了，a:hover b这样,不用jquery的。
失真那个，不知道咋整。
地址在这：https://www.tenpay.com/v2/index.shtml
还没搞清他们是怎么实现的，求大神指点，我在网上查了一下，好像是要用到animate的jquery插件，我想问有没有不用插件就可以实现这个箭头顺时针的方法呢？
背景图片在这：
------解决方案--------------------
<!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=Gb2312" />
<title>无标题文档</title>
<style>
span.bottom{
position: relative;
width: 25px;
height: 25px;
float: left;
-webkit-transition: .3s ease-in;
-moz-transition: .3s ease-in;
-o-transition: .8s ease-in;
transition: .3s ease-in;
}
span.bottom em, span.bottom i{
position: absolute;
left: 0;
border-color: rgba(255,255,255,0);
border-style: solid;
border-width: 13px 13px 0px;
}
span.bottom em{
border-top-color: #6c6c6c;
top: 5px;
}
span.bottom i{
border-top-color: #fefefe;
}
span.bottom:hover{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
</style>
<body>
<span class = "bottom">
<em></em><i></i>
</span>
</body>
</html>
是不是类似这样的效果？
使用CSS3可以。只是有些浏览器不支持CSS3的话，就。。。
------解决方案--------------------
这么比喻吧，你父元素的class=a
这个元素下，有文字，和那个图标。
图标的class=b
之前是把hover放在b上面的：b:hover
你把hover放在a上，就可以实现你3楼说的问题了，a:hover b这样,不用jquery的。
失真那个，不知道咋整。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
