2

CSS3 アニメーション/変形について質問があります。通常、私は CSS3 を回避する方法をいつでも見つけることができます - CSS3 は非常に単純なので、これは私に問題を引き起こしています。

私が持っているのはプラス記号の写真です。ユーザーがプラス記号にカーソルを合わせると、360 度回転し、画像がマイナス記号に変わります。アニメーションが終了するとすぐにプラス記号に戻ることを除いて、すべてがうまく機能しています。マウスがホバーアウトするまでマイナス記号のままにしたいのですが、その後プラス記号に戻ることができます。

これが私のコードです：

#lock-screen #time-section .unlock {
    cursor: pointer;
    display: block;
    height: 22px;
    width: 23px;
    background-image: url('../images/metro_icon_pack/plus.png');
    background-repeat: no-repeat;
    margin-left: -15px;
    margin-top: 5px;
}

#lock-screen #time-section .unlock:hover {
    animation: rotate 1s;
    -o-animation: rotate 1s;
    -ms-animation: rotate 1s;
    -moz-animation: rotate 1s;
    -webkit-animation: rotate 1s;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        background-image: url('../images/metro_icon_pack/minus.png');
    }
}

今、私は WebKit ベースのブラウザー (Chrome と Safari) 用のコードしか提供していないことに気付きました。これは、私が Chrome でテストしているためです。入手したら、後で他のブラウザのサポートをさらに追加します。

助けてくれてありがとう、みんな！

4

1 に答える 1

1

マイナスの背景画像を下に配置し#lock-screen #time-section .unlock:hover、1 秒の背景画像トランジションを追加するだけです。

また、0%、100% を使用するのではなく、from、to... を使用できます。

お気に入り：

#lock-screen #time-section .unlock:hover {
background-image: url('../images/metro_icon_pack/minus.png');
-webkit-transition: background-image 1s;
/* Other -vendor-transitions go here */
}

デモ。

また、アニメーションではなく変換アプローチを使用し、トランジションのみを使用します (要素を回転させてプラス記号に戻すこともできます)...
Demo .

要素を回転させてプラス記号に戻したくない場合は-webkit-transition、ホバー状態に を追加するだけです。

デモ。

于 2012-10-28T03:16:43.517 に答える