私は「波」の蒸気が上がっているコーヒーを飲みました。歪みのあるCSSの方法があるかどうか疑問に思っています。そのため、ぼやけた波のように見えます(Fata Morganaなど)。波の効果のようにイメージを歪める方法はありますか?
私はカップのコピーをアップロードしました。そしてhereは私の蒸気です。
私は「波」の蒸気が上がっているコーヒーを飲みました。歪みのあるCSSの方法があるかどうか疑問に思っています。そのため、ぼやけた波のように見えます(Fata Morganaなど)。波の効果のようにイメージを歪める方法はありますか?
私はカップのコピーをアップロードしました。そしてhereは私の蒸気です。
現実の蒸気は、実際にそのように動作しません。静的なイメージから抜け出すことは(少なくとも私のために)不可能になる多くの流れとランダム性があります。
しかし、いくらかのスキューとフェーディングでおおよその効果が得られると思います。これを行うには、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/
これは前後にゆがみや不透明度をアニメーション化し、それはとてもランダムではありません。もちろん、より多くのフレームをアニメーションに追加して、一見無作為な外観にするか、パターンを追従しにくくすることができます。
リアル蒸気がよりランダムに移動します。あなたは完全なJSを行かなければならないので、あなたは、(私の知っていること)のみCSSでそのようにランダム性を行うことはできません。
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
として斜行不透明度の変更またはその他の追加します上記のフレームワークではかなり些細なことです。
これは有効な質問ですか? – Nix
あなたの蒸気は403エラーです。 – th3falc0n
投票に投票する理由CSS効果を活用してコーヒースチームを実際により鮮明にすることは、とても素晴らしいことです。 – mrtsherman