50. Tenpay ホームページ_html/css_WEB-ITnose に矢印背景アニメーション animate メソッドを実装してください。-htmlチュートリアル-php.cn

50. Tenpay ホームページ_html/css_WEB-ITnose に矢印背景アニメーション animate メソッドを実装してください。

WBOY

リリース： 2016-06-24 12:26:12

オリジナル

1426 人が閲覧しました

アドレスはこちらです: 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をサポートしていないだけです。。。
あの、マスター、もう一度質問させてください！あなたのものはホバーで制御されていますが、私のものはその隣のテキストと一体になっており、左側のテキストの上にマウスを置くと効果がありません。 jquery コードを追加してもよろしいですか?また、背景の回転を制御するCSS3はありますか?

この効果と似ていますか?

CSS3を使用できます。一部のブラウザはCSS3をサポートしていないだけです。。。

あなたの方法を使用して CSS3 で背景の回転を制御しましたが、問題が発生しました。背景の回転中にアイコンがわずかに歪んでいます。これについてはどうすればよいでしょうか?

親要素の class=a

この要素の下にテキストとアイコンがあります。

アイコンの class=b

以前は b の上に hover を置きました: b:hover

a に hover を置くと、3 階で述べた問題を達成できます。 a:hover b は次のようになります、jQueryは必要ありません。

歪みを直す方法がわかりません。

親要素の class=a

この要素の下にテキストとアイコンがあります。

アイコンの class=b

以前は b の上に hover を置きました: b:hover

a に hover を置くと、3 階で述べた問題を達成できます。 a:hover b は次のようになります、jQueryは必要ありません。

歪みを直す方法がわかりません。
ありがとうございます。animateプラグインのせいかテンペイの回転が崩れません。とにかく、私たちは今勉強中なので、最後にこの小さな問題を調べてみましょう。