5

デモをチェックアウトしてください - http://jsfiddle.net/cYGzC/

アイデアは、ホバー時にクロス (「×」) がその中心を中心に回転し、ホバー時に素敵な回転運動を与えるというものです。問題は、これがうまく機能するには、×の中心と円の中心が一致しなければならないことです。

.close_button {
    background-color: #3b3b3b;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(150,150,150,0.9);
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    cursor: pointer;
}

上記の CSS トリックは、Windows の Chrome を除く多くのブラウザーで機能するようです。(Mac Chrome は問題なく動作するようです。)

4

2 に答える 2

3

簡単な答えは、十字架に画像を使用することです。Taras が言うように、すべてのブラウザーでフォントがまったく同じようにレンダリングされるという保証はありません。

于 2013-04-12T08:41:28.300 に答える
0

font-family問題の一部を引き起こしているようです。あなたが作るとfont-family:Arial, Helvetica, sans-serif;、Firefoxでうまくいくようです

http://jsfiddle.net/cYGzC/1/

于 2013-04-12T08:38:55.017 に答える