0

いくつかのロールオーバー ボタンを作成して使用することで、いくつかの CSS を練習してきましたが、それは chrome と safari とのみ互換性があると-webkit聞きました。-webkitアニメーションを他のブラウザで動作させたい場合は、どのコードを追加すればよいですか? これが私のコードです：

HTML:

    <!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="main.css">
    <title>Rollover buttons</title>
</head>
<body>
    <article>   
        <p id="button">Button!</p>
    </article>
</body>
</html>


body{
    text-align:center;
}
#button{
    display:block;
    border:2px solid green;
    margin:150px 400px;
    background:#604085;
    color:#ffffff;
    width:100px;
    height:50px;
    -webkit-border-radius:30px;
    -webkit-transition:background 0.5s,width 0.5s, height 0.5s;
}
#button:hover{
    background:#67e456;
    width:110px;
    height:60px;
}
4

4 に答える 4

2 
transition: opacity 0.5s linear; /* vendorless fallback */
-o-transition: opacity 0.5s linear; /* opera */
-ms-transition: opacity 0.5s linear; /* IE 10 */
-moz-transition: opacity 0.5s linear; /* Firefox */
-webkit-transition: opacity 0.5s linear; /*safari and chrome */

ベンダー プレフィックスについて調べたいと考えています。コメントを使用した単純な不透明度遷移の例を次に示します。

最新のブラウザ サポートについては、こちらをご覧ください - http://caniuse.com/

于 2012-09-24T15:06:00.283 に答える
1

次のように、ロールオーバーにイメージ スプライトを使用することもできます。

.button {
background-image: src(../images/soandso.jpg);
background-image: top left;
width: 45px;
height: 15px;
}

.button:hover {
background-image: src(../images/soandso.jpg);
background-image: bottom left;
width: 45px;
height: 15px;
}

次に、jQuery を使用してフェードイン効果や達成しようとしているものを何でも使用できます。

于 2012-09-24T15:12:46.927 に答える
0

ブラウザ間の互換性を保証したい場合は、現時点では CSS3 アニメーションをまったく使用せず、代わりに jQuery Effects などを使用してこれを行うことをお勧めします。

于 2012-09-24T15:02:15.397 に答える
0

@BoltClock が指摘したように-webkit、ベンダー プレフィックスです。ただし、アニメーションに対する他のベンダーからのサポートは限られており、アニメーションがW3 から注目/正式化されているため、これは増加すると予想されます。

トランジション(CSS が示すもの) とアニメーション (タイトルで参照されるもの) は、異なるプレフィックスと W3 ドキュメントのセットでカバーされていることに注意してください。

于 2012-09-24T15:07:53.097 に答える