8

次のことができる方法はありますか？

左側に標準画像、右側に :hover 状態の画像を示す透明な png スプライトがあります。

css3トランジションのみを使用して、:hoverで左の画像から右の画像に画像をフェードさせる方法はありますか? 次のことを試しましたが、うまくいきません。

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

さて、上記は背景をアニメーション化し、画像をパンします。パンの代わりに欲しいのは、フェードまたはディゾルブ効果です。

更新: 2 つの要素を作成し、不透明度を個別にアニメーション化する必要がありました。各要素の正確なマージンを指定する必要があるため、少し面倒ですが、うまくいくと思います。みんなの助けに感謝します:)

4

8 に答える 8

4

このトピックに関する最新ニュース:

Chrome 19 以降では、背景画像の遷移がサポートされています。

デモ: http://dabblet.com/gist/1991345

追加情報: http://oli.jp/2010/css-animatable-properties/

于 2012-07-14T08:22:22.193 に答える
3

実際の移行を行うコードを指定していません。

http://css3.bradshawenterprises.com/cfimg1/

ホバースタイルでこれを試してください：

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;
于 2011-08-04T21:55:00.163 に答える
1

これを見てください：http://jsfiddle.net/j5brM/1/

これはすべてのニーズに合っていると思いますし、少し複雑ではありません。

于 2011-08-04T22:16:03.053 に答える
1

CSSで背景画像だけの不透明度を変更できるとは思わないので、背景画像に2つの個別の要素（スプライトの各位置に1つ）があり、ホバー時に両方の不透明度を変更しない限り、私は思うあなたは立ち往生しています。

于 2011-08-04T22:22:12.113 に答える
0 
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

する必要があります

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

それがそれを修正するかどうかはわかりませんが。

于 2011-08-04T21:48:11.737 に答える
0

私はこれが少し遅れるかもしれないことを知っています. しかし、私は長い間同じ問題に苦しんでいました。また、透明なスプライトでは、多くのソリューションが機能しないようです。

私がしたことはこれです

HTML

<div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}

これは純粋なCSSの方法であり、コーディングが少し多い..しかし、私が望む効果を達成する唯一の方法のようです! これにも出くわした人々がこれから助けを見つけることができることを願っています!

于 2014-10-15T12:48:30.707 に答える
-1

CSS:-

li { background: url( http://oakdale.squaresystem.co.uk/images/solutions.png ) リピートなし 左中央; 背景サイズ: 89px; パディング: 54px 0 54px 130px; webkit-transition:all 0.5s linear; -moz-transition:すべて 0.5 秒線形; -o-transition:すべて 0.5 秒線形; トランジション:すべて 0.5 秒の線形; }

li:hover { background-size: 50px }

于 2017-03-10T07:46:36.053 に答える