Geek asks and answers

Is there any way to distort the image so that it looks like a ripple effect?

I have a cup of coffee with “wave” steam, and I am wondering if there is a (preferred) CSS way for distortion to look like a wave with some blur, something like the Fata Morgana Effect .

I uploaded a copy of my cup. And here is my steam.

Here

+5
source share
1 answer

Real steam does not work that way. There is a lot of smooth and random that it would be impossible (at least for me) to get out of a static image.

, , . 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) +  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/

+6
source

More articles:


All Articles