31

Webkit がいつグラデーションの遷移をサポートするか知っている人はいますか?
たとえば、次のコードは Chrome 6 では機能しません (grad-transition がリンクであると仮定します)。

.grad-transition {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
     -webkit-transition: background-image .5s;
}
.grad-transition:hover {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}
4

5 に答える 5

50

同じことをしようとしています。

今のところ、グラデーションをアニメートすることはできないと思います。

回避策を使用しています。グラデーションをアニメーション化する代わりに、背景画像に半透明のグラデーションを使用してから、背景色をアニメーション化します。

#button
{
    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%, rgba(255, 255, 255, 0.9)),
    color-stop(100%, rgba(0, 0, 0, 0.6))
    );
}

#button:hover
{
   background-color: #353535;
}

また、ここにいくつかの例を示します：http: //tylergaw.com/www/lab/css-gradient-transition-sorta/

于 2011-01-04T21:05:01.873 に答える
10

また、background-positionを使用して、実際には単に移動しているときに、グラデーションが変化しているように見せることもできます。http: //sapphion.com/2011/10/css3-gradient-transition-with-background-position/

于 2011-10-25T07:44:30.167 に答える
2

ちょっとしたハックを使用して、グラデーションでトランジションを行うことができます。

以下のコードは、最も暗い色の透明度を 0.3 に設定します。ホバーすると、この色が別の色に設定されます。透明度は遷移できるため、同じ効果が生成されます。

また、mozilla と IE の非移行バージョンも追加しました。

.menu li a {
  background-color: #ffffff; 
  background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));

  background: linear-gradient(left,#eeeeee, #ffffff);
  background: -moz-linear-gradient(180deg,  #eeeeee,  #ffffff);
}

.menu li a:hover {
  background-color: #006613;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;

  background: linear-gradient(left, #006613, #eeeeee);
  background: -moz-linear-gradient(180deg,  #006613,  #eeeeee);
}
于 2011-09-05T14:56:06.363 に答える
1

少し前にこの質問をしました。質問を検索すると、得られた回答を確認できます。彼らは、まだこれを適切に行うことはできないと言っていましたが、2 つの異なる div にグラデーションを設定し、1 つの div をもう 1 つの div の上にフェードさせて効果を作成することで、それを行うことができます。

于 2011-10-16T05:30:34.607 に答える