4

私は CSS3 グラデーションで遊んでいて、マウスオーバーで移動しようとしています。このjsFiddleからわかるように、CSS グラデーションが表示され:hoverます。ただし、数回ちらつくようです。

参考までに、これはChrome v30/ Firefox v24/でテスト済みSafari v5.1です。

別々に、両方とも有効なソリューションであることが判明しましたが、組み合わせると、ちらつき効果が得られます。

nav li {
    width: 90px;
    padding-right: 15px;
    padding-left: 15px;
    height: 30px;
    border: 1px solid #000;
    float: left;
    list-style-type: none;

    background-position: -200px -200px;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

nav li:hover {
    background-position: 200px 0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}

を使用してアニメーションを制限しようとしanimation-iteration-countましたが、わかったように、これはアニメーションと@keyframes. @keyframesまた、 CSS グラデーション アニメーションをまだサポートしていないサイトをいくつか読んだことがあります 。

4

3 に答える 3

4

問題はバックグラウンドリピートです。ホバーする前に背景が表示されないように、繰り返しなしに設定する必要があります

background-repeat: no-repeat;

JSFiddle

于 2013-10-30T14:12:20.327 に答える
4

30pxちらつき効果は、要素の高さ ( ) と背景に指定したオフセット ( -200px-> )の違いによるもの0pxです。

基本的に、1 秒間の遷移でビューを 6 回スクロールします (30 が 200 に 6 回入るため)。これがちらつき効果をもたらしています。遷移時間を少し長くすると (たとえば 5 秒)、効果をより簡単に確認できます。これにより、何が起こっているのかがより明確になります。(もちろん、テストが終わったら元に戻すことができます)

の代わりにイニシャルbackground-positionを変更すると、一度だけスクロールして表示されるため、ちらつきがなくなります。-30px-200px

それが役立つことを願っています。

于 2013-10-30T14:12:42.867 に答える
1

他の回答で述べたように、問題はbackground-repeatあなたの非常に大きなバックグラウンドポジションです。

これは、あなたが達成しようとしていたと私が信じている更新されたフィドルです。

冗長な CSS ルールをすべて削除したことに注意してください。主要なブラウザーはすべて、プレフィックスなしでグラデーションとトランジションをサポートするようになったため、これらのプレフィックスはすべて役に立たなくなりました (また、IE は銃を飛ばさなかったので、存在しなかったこと-ms-transitionにも注意してください.. -ms-linear-gradient. Chrome でグラデーションを定義するには、少なくとも 3 つの異なる方法があることをご存知ですか?)

クリーンアップに加えて、背景の定義を (ホバー スタイルではなく) 要素のスタイルに移動して、「トランジション アウト」が可能であることを確認しました。background-repeat:repeat-x水平方向の繰り返しのみを許可するように適用しbackground-position、初期状態でグラデーションが下から完全に外れないように調整し、ホバー状態が適切な場所にあるようにしました。これにより、滑らかで正確なトランジションが生成されます。

お役に立てれば！

于 2013-10-30T14:21:05.630 に答える