7

我有一杯咖啡，“波浪”蒸汽上升，我想知道是否有（首选）CSS 方式来扭曲，所以它看起来像一个带有一些模糊的波浪，有点像Fata Morgana效果。

我上传了我的杯子的副本。这是我的蒸汽。

这里

4

1 回答 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/

于 2013-02-01T15:01:10.727 回答