क्या लहर प्रभाव की तरह दिखने के लिए एक छवि विकृत करने का कोई तरीका है?

Question

मेरे पास 'लहर' भाप के साथ एक कप कॉफी है और मुझे आश्चर्य है कि विरूपण के लिए एक (पसंदीदा) सीएसएस तरीका है, तो यह कुछ धुंध के साथ एक लहर की तरह दिखाई देगा, कुछ 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/

यह skewing और अस्पष्टता एनिमेट आगे और पीछे, तो यह इतना यादृच्छिक नहीं है। आप निश्चित रूप से एनीमेशन में अधिक फ़्रेम जोड़ सकते हैं ताकि यह एक यादृच्छिक रूप से यादृच्छिक रूप दे सके या पैटर्न को अनुपालन करना कठिन हो।

असली स्टीम अधिक यादृच्छिक रूप से चलता है। आपको लगता है कि अकेले सीएसएस (है कि मैं के बारे में पता) के साथ की तरह अनियमितता नहीं कर सकते, तो आप पूर्ण जे एस जाना है:

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/