Có cách nào làm méo mó hình ảnh giống như hiệu ứng sóng không?

Question

Tôi có một tách cà phê với làn sóng 'hơi nước' đi lên và tôi tự hỏi nếu có một (ưa thích) CSS cách để biến dạng vì vậy nó sẽ giống như một làn sóng với một số mờ, một cái gì đó giống như một hiệu ứng Fata Morgana.

Tôi đã tải lên bản sao tách của mình. Và here là hơi nước của tôi.

Answer 1

Thực tế hơi nước không thực sự hoạt động theo cách đó. Có rất nhiều dòng chảy và ngẫu nhiên mà sẽ là không thể (ít nhất là đối với tôi) để có được ra khỏi một hình ảnh tĩnh.

Tuy nhiên, tôi nghĩ rằng hiệu ứng gần đúng có thể đạt được với một số lệch và mờ dần. Bạn có thể sử dụng hình ảnh động CSS để làm điều này:

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

này sinh động skewing và opacity qua lại, vì vậy nó không phải như vậy ngẫu nhiên. Tất nhiên, bạn có thể thêm nhiều khung hình hơn vào hoạt ảnh để cho nó trông có vẻ ngẫu nhiên hoặc làm cho mẫu khó theo dõi hơn.

Hơi nước thực chuyển động ngẫu nhiên hơn. Bạn không thể làm tính ngẫu nhiên như thế với mình CSS (mà tôi biết), vì vậy bạn phải đi đầy đủ 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); 

Thêm thay đổi opacity hoặc khác làm lệch như skewY (có thể có hiệu quả) nên khá tầm thường với khung trên.

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