純粋なCSS(Firefox)でのちょっとした火事

Firefoxブラウザーのホームページ(home(standalone、browser自体))にアクセスすると 、LGPLライセンス(少なくとも最初のabout-home-Fx.js )で、あまり重くないアニメーションスプライトで行われた炎の良い実装が見つかりました。 。 毎日、ブラウザのスクリプトで高品質の火災が発生するわけではありません。 よく調べてみると、これらはスクリプトではなく、完全にアニメーション化されたCSSであることがわかりました。 小さなスクリプトは、起動と停止にのみ使用されます。 このアイデアとフォーマットを使用して、設計者は、火災、煙、または流れる水の独自の実現を作成できます。



インターネット上のコードからキーワードを検索しても結果が得られなかったため、 TuringマシンGithub )のように、偶然と謎の束縛からスクリプトとスタイルを解放したいという要望がありました。 つまり、オープンで安定したソースで、読みやすく実用的なフォームに入れてください。 そうでなければ、オリンピックは終了します-そして、彼の視界から消えるあらゆる機会があるでしょう。 結果は次のとおりです。

github.com/spmbt/flame-animate-css-mozilla



(Firefoxで唯一のindex-snap-flame.htmファイルを参照してください。必要に応じて、 / originalMozフォルダー全体をダウンロードし、 index-snap-flame-originalRu.htmのページにあるすべての要素を表示することもできます。



デモ: spmbt.kodingen.com/demo/index-snap-flame.htm

(CSSコーディングの特性により、アニメーションはFirefoxでのみ機能します。新しいファイルでクロスブラウザコードを使用してプルリクエストまたはフォークを行う場合、私は喜んでいます)。



もちろん、アニメーションはMozillaに合わせて調整されていますが、ほとんどの場合、スタイルを書き換えても、他の最新のブラウザーでの実行が妨げられることはありません。



ライセンスとオーサーシップがありますが、内部ブラウ​​ザースクリプト専用のMozillian開発であることを除いて、あまり明確ではありません。 Home.jsについての起動スクリプトはLGPL(主なものを含む3人の著者-Marco Bonardo(元の著者))によってライセンスされていますが、発火パターンの起源は作業ページから抽出する必要があるため不明です。



UPD: k12thは、 Chrome / Webkitで動作するようにスタイルを更新しましたが、これまでのところ、Firefoxよりも(「悪い」とは言わないまでも)アニメーション化されていません。 しかし、とにかく、クロスブラウザ互換性の最初のイテレーションに感謝します( リクエストがまだある場合は、月曜日に受け入れられます、すみません )。



All Articles