6

いくつかのリンクを含むメニューがあります。これらのリンクにカーソルを合わせると、バックグラウンドで光る効果が得られるようにしたいと思います。

リンクにcssトランジション、ボックスシャドウ、明るい背景色を使用して、ほぼ完成しました。

問題は、トランジション効果がボックスシャドウに影響を与えるため、トランジションが開始されたときにリンクにボックスシャドウがなく、背景色が正方形になることです。トランジションが終了すると、光る背景はきれいに見えます。

私のjsFiddleを参照してください：http：//jsfiddle.net/xCJ46/。

ご協力いただければ幸いです。

これが私のCSSの抜粋です：

<html><style>
div a:hover {
    background: #527fa9;

    -webkit-box-shadow: inset 0 0 30px 15px #49628a;
    -moz-box-shadow: inset 0 0 30px 15px #49628a;
    box-shadow: inset 0 0 30px 15px #49628a;

    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}
</style></html>
4

1 に答える 1

10

ボックスシャドウをリンクのプロパティに追加します（ホバーではありません）。

div a { box-shadow: inset 0 0 30px 15px #49628a; }
于 2013-02-06T12:38:55.463 に答える