javascript - 有没有办法使图像看起来像波浪效果？

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。




已关闭8年。




我喝了一杯咖啡，但波浪形的 Steam 不断上升，我想知道是否有一种(首选的)CSS失真方式，以便看起来像是带有一些模糊的波浪形，类似于Fata Morgana效果。

我上传了我的杯子的副本。 here是我的动力。

最佳答案

现实生活中的 Steam 并不是那样工作的。有很多流动和随机性(至少对我而言)是不可能摆脱静态图像的。

不过，我认为通过一些倾斜和褪色可以达到大致的效果。您可以使用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/

这样可以使来回的倾斜和不透明设置动画，因此它并不是那么随机。当然，您可以向动画中添加更多帧，以使其看起来看似随机，或使图案更难跟随。

实际 Steam 运动更加随机。您不能仅凭CSS来完成随机性(据我所知)，因此您必须使用完整的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);

在上面的框架中，添加不透明度更改或其他偏斜(例如skewY)(可能有效)应该是微不足道的。

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

关于javascript - 有没有办法使图像看起来像波浪效果？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14648203/