50. Please implement the arrow background animation animate method on the Tenpay homepage_html/css

50. Please implement the arrow background animation animate method on the Tenpay homepage_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:26:12

Original

1378 people have browsed it

The address is here: https://www.tenpay.com/v2/index.shtml
I haven’t figured out how they implement it yet. Please give me some advice. I checked it online and it seems that I need to use Coming to animate's jquery plug-in, I would like to ask if there is a way to achieve this clockwise arrow without using a plug-in?

The background image is here:

Reply to discussion (solution)

<!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>

Copy after login

Is it similar to this effect?

Use CSS3. It's just that some browsers don't support CSS3. . .

Is it similar to this effect?

Use CSS3. It's just that some browsers don't support CSS3. . .

Wow wow wow, great God! It turns out that CSS3 can be implemented. Thank you very much. What I want is CSS3, but I haven’t learned much yet! Let me study your code first.

Is it similar to this effect?

Use CSS3. It's just that some browsers don't support CSS3. . .
Um, Master, let me ask again! Yours is controlled by hover, but mine is one piece with the text next to it. If I put the mouse on the text on the left, won't it have no effect? Do you still want me to add jquery code? Also, is there any CSS3 that controls background rotation?

Is it similar to this effect?

Use CSS3. It's just that some browsers don't support CSS3. . .

I used your method to control the background rotation with CSS3, but there is a problem: the icon is slightly distorted during the background rotation! What to do about this?

Let’s put it this way, your parent element’s class=a

Under this element, there is text and the icon.

The icon’s class=b

Previously, hover was placed on b: b:hover

If you put hover on a, you can achieve your 3rd floor That’s the problem, a:hover b is like this, no jquery is needed.

I don’t know how to fix the distortion.
Thank you very much, but the Tenpay rotation will not be distorted, maybe because I used the animate plug-in. Anyway, we are studying now, so let’s explore this small problem at the end!