0

複数のグラデーションで円形のボタンを作成しています。ホバーすると回転するはずです..

<ul class="navigation">
    <li>
        <a href="#" class="home">Home</a>
    </li>
</ul>

CSS:

.navigation li {
        float: left;
    }

.navigation li a {
    display: inline-block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: white;
    text-decoration: none;
}

.home {
    background: linear-gradient(130deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
    width: 110px;
    height: 110px;
    line-height: 110px;
    position: relative;
    z-index: -1;
}

.home:hover {
    transform: rotate(-45deg);
}

ここで複数の問題に直面しています..

1- どのブラウザーでも、.home:hover の回転が機能しません。

2-うまくいけば、円形の背景とテキスト「ホーム」の両方が回転すると思います。円だけを回転させる方法はありますか?

3- これはどう説明したらいいのかわかりません. まるで円に十分な多角形がないかのようです. ズームすると見える直線が見えます. この問題は一部のブラウザでのみ発生し, 表示されません. border-radius をより大きな値に設定して変更します。

4

1 に答える 1

1

ホバースタイルを

 li:hover .home {
     background: linear-gradient(90deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
 }

あなたのすべての問題を解決します

フィドル

于 2013-10-24T18:03:49.597 に答える