Gibt es eine Möglichkeit, ein Bild so zu verzerren, dass es wie ein Welleneffekt aussieht?

Question

Ich habe eine Tasse Kaffee mit 'Welle' Dampf steigt und ich frage mich, ob es eine (bevorzugte) CSS-Möglichkeit zur Verzerrung, so dass es wie eine Welle mit etwas Unschärfe aussehen würde, so etwas wie ein Fata Morgana Effekt.

Ich habe eine Kopie meiner Tasse hochgeladen. Und here ist mein Dampf.

Answer 1

Real life Dampf funktioniert nicht wirklich so. Es gibt viel Fliessen und Zufälligkeit, die (zumindest für mich) unmöglich wäre, aus einem statischen Bild herauszukommen.

Nichtsdestotrotz denke ich, dass ein ungefährer Effekt mit etwas Verdrehen und Verblassen erreicht werden kann. Sie können CSS-Animationen verwenden, um dies zu tun:

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

Das belebt die Schrägstellung und Opazität hin und her, so ist es nicht so zufällig. Sie können der Animation natürlich weitere Frames hinzufügen, um ein scheinbar zufälliges Aussehen zu erhalten oder das Muster schwieriger zu folgen.

Echte Dampf bewegt sich mehr zufällig. Sie können keine Zufälligkeit mit CSS wie das tun allein (die ich kenne), so dass Sie sich voll JS gehen:

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

Hinzufügen Opazität Änderungen oder andere Schrägstellung wie skewY (die wirksam sein können) sollte sein mit dem obigen Rahmen ziemlich trivial.

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