C'è un modo per distorcere un'immagine per sembrare un effetto onda?

Question

Ho una tazza di caffè con il vapore dell'onda che si alza e mi chiedo se c'è un (preferito) modo CSS per la distorsione, quindi sembrerebbe un'onda con qualche sfocatura, qualcosa come un effetto Fata Morgana.

Ho caricato una copia della mia tazza. E here è il mio vapore.

Answer 1

vapore vita reale in realtà non funziona in questo modo. C'è un sacco di fluidità e casualità che sarebbe impossibile (almeno per me) uscire da un'immagine statica.

Tuttavia, penso che si possa ottenere un effetto approssimativo con un po 'di inclinazione e dissolvenza. È possibile utilizzare le animazioni CSS per fare questo:

@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/

Questa anima il disallineamento e l'opacità avanti e indietro, quindi non è così casuale. Ovviamente puoi aggiungere più fotogrammi all'animazione per dare un aspetto apparentemente casuale o rendere più difficile seguire il modello.

Il vapore reale si sposta in modo più casuale. Non si può fare casualità così con solo i CSS (che io sappia), quindi bisogna andare JS pieno:

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); 

aggiungo i cambiamenti di opacità o altri inclinazione come skewY (che può essere efficace) dovrebbe essere abbastanza banale con il quadro di cui sopra.

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