0

ヘッダー用にコンパスとコンパスの針をコーディングしました。コンパスにカーソルを合わせると、針は 720 度の角度で回転しますが、コンパスからマウスを離しても逆にならないようにする方法が必要です。簡単な解決策を見落としている場合は申し訳ありませんが、これが現在のコードで、何が改善されているかを説明しています。

.arrow{
    width:100px; 
    height:100px;
    background-image:url(https://dl.dropbox.com/u/81513943/Monolith/images/compass.png);
    background-size:100px;
}

.arrowhover{
    position:absolute;
    margin-top:-100px;
    background-size:100px;
    width:100px;
    -webkit-transition: all 1.7s ease-in-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    height:100px;
}

.arrowhover:hover{      
    -webkit-transform: rotate(1440deg);
    -moz-transform: rotate(1440deg);
    -webkit-transition: all 1.7s ease-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

コンパスは正常です。カーソルを合わせると 720 度回転し、マウスを離すとアニメーションが必要なくなります。これを行う方法はありますか?

ps私はjqueryとjavascriptで役に立たない

4

1 に答える 1

0

更新されたフィドルを確認してください：http：//jsfiddle.net/rHpDn/3/

transition: all 0s ease-in-out;.arrowに追加したので、もうトランジションはありません。

于 2013-01-19T23:50:09.573 に答える