有沒有辦法扭曲圖像看起來像波浪效果？

Question

我有一杯咖啡，'波浪'蒸汽上升，我不知道是否有（首選的）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/