50求财付通主页上的箭头背景动画animate实现方法_html/css

50求财付通主页上的箭头背景动画animate实现方法_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-24 12:26:12

원래의

1378명이 탐색했습니다.

地址在这：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的话，就。。。

是不是类似这样的效果？

使用CSS3可以。只是有些浏览器不支持CSS3的话，就。。。

哇哇哇，大神啊！原来CSS3可以实现，非常感谢，要的就是CSS3，不过现在还没怎么学！我先研究下你这代码

是不是类似这样的效果？

使用CSS3可以。只是有些浏览器不支持CSS3的话，就。。。
额，大神，再问一下！你这个是用hover控制的，但是我这个和旁边的文字是一整块啊，我如果把鼠标放在左边的文字上那不是没有效果？难道还让我再加jquery代码？还有啊，有没有控制背景旋转的CSS3呢？

是不是类似这样的效果？

使用CSS3可以。只是有些浏览器不支持CSS3的话，就。。。

我用你的方法用CSS3控制背景旋转，可是有个问题就是，背景旋转过程中图标有小小失真！这个怎么办呢？

这么比喻吧，你父元素的class=a

这个元素下，有文字，和那个图标。

图标的class=b

之前是把hover放在b上面的：b:hover

你把hover放在a上，就可以实现你3楼说的问题了，a:hover b这样,不用jquery的。

失真那个，不知道咋整。

这么比喻吧，你父元素的class=a

这个元素下，有文字，和那个图标。

图标的class=b

之前是把hover放在b上面的：b:hover

你把hover放在a上，就可以实现你3楼说的问题了，a:hover b这样,不用jquery的。

失真那个，不知道咋整。
非常感谢，不过财付通那个旋转是不会失真的，可能是用了animate的插件。反正现在是学习，这个小问题最后才去摸索吧！