有没有办法扭曲图像看起来像波浪效果？

Question

我喝了一杯咖啡，'wave'蒸汽上升了，我想知道是否有（优选的）CSS方式失真，所以它看起来像一个有一些模糊的波浪，类似于Fata Morgana效果

我上传了一份我的杯子。 here是我的动力。

Answer 1

现实生活中的蒸汽并没有真正发挥作用。有很多流动和随机性是不可能的（至少对我而言）摆脱静态图像。

尽管如此，我认为可以通过一些倾斜和褪色来实现近似效果。您可以使用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/