7

私は「波」の蒸気が上がっているコーヒーを飲んでいます.Fata Morgana効果のようなぼかしのある波のように見えるように、（推奨される）CSSの歪み方法があるのではないかと思います。

カップのコピーをアップロードしました。そして、これが私の蒸気です。

ここ

4

1 に答える 1

7

実際の蒸気は実際にはそのようには機能しません。静的な画像から抜け出すことは (少なくとも私にとっては) 不可能な、流動的でランダムなものがたくさんあります。

とはいえ、多少のゆがみや色褪せでおおよその効果は得られると思います。これを行うには、CSS アニメーションを使用できます。

@keyframes steam {
    0%, 100% {
        transform: skewX(0deg);
        opacity: 1;        
    }
    25% { transform: skewX(10deg); opacity: .8; }
    75% { transform: skewX(-10deg); opacity: .8; }
}

http://jsfiddle.net/ExplosionPIlls/wxfg5/1/

これにより、ゆがみと不透明度が前後にアニメートされるため、それほどランダムではありません。もちろん、アニメーションにフレームを追加して、見た目をランダムにしたり、パターンを追跡しにくくしたりすることもできます。

実際の蒸気はよりランダムに移動します。CSS だけでそのようなランダム性を実現することはできません (私が知っていることです)。そのため、完全な JS を使用する必要があります。

var frameTime = 200;

var transition = 'all ' + (frameTime / 1000) + 's linear';
img.style.WebkitTransition = transition;
img.style.transition = transition;

setInterval(function () {
    var skew = Math.round(Math.random() * 10) * (Math.random() < 0.5 ? -1 : 1);
    skew = 'skewX(' + skew + 'deg)';
    img.style.transform = skew;
    img.style.WebkitTransform = skew;
}, frameTime);

上記のフレームワークでは、不透明度の変更やその他のスキューskewY(効果的である可能性があります) を追加することはかなり簡単です。

http://jsfiddle.net/ExplosionPIlls/wxfg5/2/

于 2013-02-01T15:01:10.727 に答える