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

Question

我有一杯咖啡,'波浪'蒸汽上升,我想知道是否有一种(首选)CSS方式扭曲,所以它看起来像一个模糊的波浪,像Fata Morgana效果.

我上传了一份我的杯子.而这里是我的蒸汽.

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/