Javascript 有没有办法使图像扭曲成波浪效果？

我喝了一杯咖啡，咖啡中的“波浪”蒸汽上升，我想知道是否有一种（首选的）CSS方式来扭曲它，使它看起来像一个模糊的波浪，某种效果

我上传了一份我的杯子。这是我的蒸汽

---

现实生活中的蒸汽并不是这样工作的。有很多流动性和随机性是不可能（至少对我来说）从静态图像中得到的

尽管如此，我认为通过一些倾斜和衰减可以获得近似效果。可以使用CSS动画执行以下操作：

@keyframes steam {
    0%, 100% {
        transform: skewX(0deg);
        opacity: 1;        
    }
    25% { transform: skewX(10deg); opacity: .8; }
    75% { transform: skewX(-10deg); opacity: .8; }
}

这将前后设置倾斜和不透明度的动画，因此不会如此随机。当然，您可以向动画添加更多帧，使其看起来像是随机的，或者使图案更难跟随

真正的蒸汽运动更随机。你不能单独使用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);

var frameTime=200；
变量转换='all'+（帧时间/1000）+'s linear'；
img.style.WebkitTransition=转换；
img.style.transition=过渡；
setInterval（函数（）{
var skew=Math.round（Math.random（）*10）*（Math.random（）<0.5？-1:1）；
歪斜='skewX（'+skew+'deg'）；
img.style.transform=倾斜；
img.style.webkitttransform=skew；
}，帧时）；

在上述框架中，添加不透明度更改或其他倾斜，例如

skewY

（这可能是有效的）应该是相当简单的

---

我认为这是一个有效的问题？您的steam是403错误。为什么投票关闭？这将是相当可怕的利用CSS效果，使咖啡蒸汽实际上微光。Thx的支持。这是一个非常有趣的效果，尽管我看起来还没有发现任何熟悉的东西。这可能是最好的动画GIF，在这里你可以更灵活地创建你的微光。伟大的工作人员！