logo标签列表

有没有一种方法可以扭曲图像，使其看起来像波浪效果？

javascriptjqueryimagecss
7
我有一杯咖啡，上面升起了'波浪'的蒸汽，我想知道是否有一种（首选）CSS方法可以扭曲它，使其看起来像带有一些模糊的波浪形，类似于Fata Morgana效果。
我上传了我的杯子的副本。这里是我的蒸汽。

Here

我认为这是一个有效的问题？ - Nix
6
您的Steam出现了403错误。 - th3falc0n
感谢您的支持。这是一个非常有趣的效果，尽管我已经搜索了很多，但还没有找到任何熟悉的东西。 - Dan Ovidiu Boncut
1
这可能最好作为一个动画GIF，这样您将拥有更多的灵活性来创建您的闪烁效果。 - halfer
@mrtsherma 他可以使用Photoshop制作一个gif来实现这个。 - Eric
显示剩余5条评论
1个回答
7

现实生活中的蒸汽并不是那样运作的。有很多流动和随机性是无法通过静态图像来表现的（至少对我而言是这样）。

尽管如此，我认为可以通过一些倾斜和淡化效果来实现近似的效果。您可以使用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) + '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/

干得好，伙计！ - Darlan Dieterich
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接