0

ホバリングするとイーズインアウト効果が得られるボタンをコーディングしようとしています。次のコードを使用しました。

#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333); 
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}

#quotebutton:hover {
/* fallback image non-cover color */
   background-color: #000;
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #333, #000); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #333, #000);
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #333, #000);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
    text-decoration:none;
    color:#fff;
}

HTMLは次のとおりです。

<div id="quotebutton">
<a href="">Download Now</a>
</div>

ただし、ボタンはホバリングへの影響を示していません。何が問題なのでしょう？

4

2 に答える 2

0

残念ながら、簡単な答えは、CSS3トランジションで背景のグラデーションをアニメーション化することはできないということです。別の手法を使用して同じ目標を達成する方法はいくつかあります。

  1. jQueryを使用して、ホバー時に2つの異なる背景画像間の遷移をアニメーション化します。これは、絶対位置を使用して3つの要素を積み重ねることで最も簡単に実現できます。ここで、下の2つは背景画像で、上の部分にはコンテンツ（この場合はボタンテキスト）が含まれています。ホバーすると、上部の背景画像がフェードアウトして、下部の画像がスムーズに表示されます。jQueryを使用してホバーで背景アニメーションを作成するには、このチュートリアルを参照してください。

  2. 半透明のグラデーションの背景をWebkitトランジションと組み合わせて使用​​して、部分的なアニメーションを作成します。CSS3トランジションは、背景色のCSS属性を簡単にアニメーション化できます。これは、存在しない、または透明な背景画像またはグラデーションを通してのみ表示されます。これを実装する方法については、この例を参照してください。

2つのオプションのうち、（1）は柔軟性がありますが、作業が多く、コンパニオンスクリプトが必要です。一方、（2）は柔軟性が低く、クロスブラウザとの互換性が低くなります。

于 2012-07-22T06:41:29.337 に答える
0

ライアンが述べたように、背景のグラデーションをアニメーション化することはできません。ただし、それを実現するのに役立つjQueryプラグインがあります。

jQueryBlendをお試しください

私が持っているもう1つのアイデアは、単色の上に線形の透明なグラデーション画像を適用することです。次に、トランジションを使用して単色をアニメートできます。上部の透明なグラデーション画像は、グラデーションアニメーションのように見えます。

それが役に立てば幸い。乾杯。

于 2012-07-22T07:23:20.660 に答える