複数3次ベジェ曲線アニメ

複数3次ベジェ曲線アニメスタ-トファイル作成

複数3次ベジェ曲線アニメスタ-トファイル
3n_bezier_index.php
を作成することにします。
基本は、
Move Image に戻り 左サイドナビ「3次ベジェ曲線アニメ」の中の
3次ベジェ曲線アニメスタ-ト PHP ファイル
とほとんど同じです。
これからその差分について説明します。

スタイルの読込

アニメ軌道のスタイルシ-トは PHP を利用して書込みます。
<?php
   include "3n_bezier.php";
?>
スタイルシ-トは、3n_bezier.php を読み込めばこれによって作成されます。
唯一、3_bezier_index.php との違いはここだけです。
読み込むファイルが、3_bezier.php から 3n_bezier.php に代わるだけです。
3n_bezier.php ファイルの説明は後述します。
出来上がった 3n_bezier_index.php は
左サイドナビ「3次ベジェ曲線アニメ」の中の
複数3次ベジェ曲線アニメスタ-ト PHP ファイル
からみてください。
これで、
複数3次ベジェ曲線アニメスタ-ト PHP ファイル
3_bezier_index.php
は作成完了です。
とてもシンプルです。

複数3次ベジェ曲線アニメスタ-ト CSS ファイル作成

複数3次ベジェ曲線アニメスタ-トCSSファイルは、3次ベジェ曲線アニメスタ-トCSSファイル
bezier_style.css
と全く同じものを使用します。
ファイル内容は、
Move Image に戻り 左サイドナビ「3次ベジェ曲線アニメ」の中の
3次ベジェ曲線アニメスタ-ト CSS ファイル
から見てください。
アニメ-ション CSS を作成するには、CSS3 で記述する必要があります。
HTML5/CSS3 で初めて出てきた書式 @keyframes で動く軌跡を規定します。
しかしながら、今回はこの部分はこの CSS ファイルでは規定せず、3n_bezier.php で設定しています。
よって、このCSS ファイルでは、@keyframes 部分は書かず、その他の必要部分を記述します。


複数3次ベジェ曲線アニメ設定ファイルに続く
複数3次ベジェ曲線アニメ作成概要に戻る

Move Imageに戻る