0

2 つの画像 (1 つは白黒、もう 1 つはカラー) を重ねて配置し、一方の画像の不透明度が減少し、もう一方の画像が増加する CSS トランジションを作成しました。結果は、ホバー効果の色です。

ただし、問題があります。移行中のある時点で、画像が少し透けて見えます。これは、「transition-timing-function」プロパティが線形に設定されていても、不透明度の移行が線形ではないことを示しています。

なんらかの 2 次イージングが関係している場合、なぜこれが起こっているのか理解できますが、あってはならないのでしょうか?

(私が純粋な CSS でこれに取り組んでいる理由は、まだ JQuery に完全に取り組んでいないからです)

この機能をより適切に実装する方法についてのアイデアはありますか?

私の CSS は以下のとおりです。または、この JSFiddle にアクセスしてください。

#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}

.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }

#dbw { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi42.tinypic.com/x0y2ky.jpg"); 
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

#dco { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi40.tinypic.com/28gwcrb.jpg"); 
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

#container:hover #dbw { 
    filter: alpha(opacity=0); 
    opacity: 0; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

#container:hover #dco { 
    filter: alpha(opacity=100); 
    opacity: 1; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}
4

1 に答える 1

1

問題は、トランジションが直線的でないことではなく、単純に、不透明でない 2 つの画像を重ねると、背景が常に部分的に見えることです。

たとえば、トランジションが中央にある場合、両方の画像が 50% 不透明になります。下の画像は背景の 50% をカバーし、上の画像は背景の残りの 50% の 50% をカバーしていますが、背景の 25% は輝いています。

一番下の画像を不透明のままにして、一番上の画像がトランジションを引き継ぐようにします。

http://jsfiddle.net/qvcRf/4/

つまり、下の画像の不透明度の遷移を削除します。

#container:hover #dbw { 
  transform: scale(1.1);
  -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
}
于 2013-09-18T22:06:38.937 に答える