ホームページ  >  記事  >  ウェブフロントエンド  >  METAタグの無視された特殊効果(ページ遷移効果)_HTML/Xhtml_Webページ制作

METAタグの無視された特殊効果(ページ遷移効果)_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:40:081344ブラウズ

Web デザインで js を使用すると、多くのページ特殊効果を実現できますが、多くの人は HTML タグの META タグの強力な効果を無視しています。実際には、meta タグによって多くの美しいページ遷移効果も実現できます。
METAタグはHTML言語のHEAD領域にある補助タグで、各Webページの


の中に配置されます。
//説明編集ツール;
//説明ホームページの説明;
。メタ タグは通常、検索エンジン ロボットのページ テーマを定義したり、ユーザーのブラウザで Cookie を定義したりするために使用されます。また、作成者の識別、ページ形式の設定、コンテンツの概要とキーワードのマーク付けにも使用できます。 定義した時間間隔に従って更新し、RASC コンテンツ レベルなどを設定します。
この記事では、主にメタ タグを使用してページ遷移効果を生成する方法について説明します。

使用法:



blendTrans は、フェード効果を生成する CSS 動的フィルターの一種です。別の動的フィルターである RevealTrans も、ページの入口と出口の効果に使用できます。
動的フィルターは、ページに移動フェードインとフェードアウト、および画像変換効果を追加できます。ブレンド (混合) と明らかに (表示)、
前者はオブジェクトを徐々に消したり現れたりすることができ、後者は 24 の画像変換効果を提供します...



持続時間: 表現フィルター効果の持続時間(単位:秒) トランジション:フィルタータイプ。どの特殊効果を使用するかを示します。値は 0 ~ 23 です。
----------------------------------------------- --- ----------------------------------
0: 長方形を縮小 1: 長方形を拡大
2: 円を減らす 3: 円を拡大
4: 下から上に更新 5: 上から下に更新
6: 左から右に更新 7: 右から左に更新
8: 縦型ブラインド9: ヨコ型ブラインド
10: オフセットヨコ型ブラインド 11: オフセットタテ型ブラインド
12: ポイントスプレッド 13: 左から右、中央へリフレッシュ
14: 中央から左右へリフレッシュ 15: ミドル上下へ
16: 上下から中央 17: 右下から左上
18: 右上から左下 19: 左上から右下
20: 左下から右上 21 :横バー
22:縦バー 23:上記22種類からランダムで1つ選択
----- ---------------------- ------------------------ ----------------------------- -
Web ページの変換効果が適切に一致している限り、これらの変換効果は、元々サイトに興味のない訪問者であっても、訪問者に非常に深い印象を残します。特にウェブページ制作を学びたい友人は、勉強や研究目的であなたのウェブページをコピーするかもしれません。実際には、短いコードを追加しただけです^_^ Web ページの変換効果 (Trans) は、「Web ページに入る」 (Page-Enter)、「Web ページを離れる」 (Page-Exit) の 4 つのカテゴリに分類されます。 )、「サイトに入る」(Site-Enter)、「サイトから出る」(Site-Exit)。各主要カテゴリは 25 のサブカテゴリに分割されています。まず、Web ページにアクセスした場合の効果を使用して説明します。

Web ページにアクセスした場合の効果
1.ミキシングエフェクトのコードは次のとおりです:

2.ボックス縮小効果のコードは次のとおりです:
3.ボックス型の放射効果コードは次のとおりです:
4.円形収縮効果のコードは次のとおりです:
5.円形放射効果のコードは次のとおりです:
6.上向き消去効果のコードは次のとおりです:
7.下向き消去エフェクトのコードは次のとおりです:
8.正しい消去効果のコードは次のとおりです:
9.左側の消去エフェクトのコードは次のとおりです:
10.垂直マスキング効果のコードは次のとおりです:
11.水平マスキング効果のコードは次のとおりです:
12.水平チェッカーボード効果のコードは次のとおりです:
13.垂直チェッカーボード効果のコードは次のとおりです:
14.分解効果コードは次のようになります:
15.左から右、中央に向かうインデント効果のコードは次のとおりです:
16.効果を中央から左右に拡大するコードは次のとおりです:
17.中央までの上下のインデント効果のコードは次のとおりです:
18.中央の上下拡大エフェクトのコードは次のとおりです:
19.左下のエフェクトを抽出するコードは次のとおりです:
20.左上からエフェクトを抽出するコードは次のとおりです:
21.右下のエフェクトを抽出するコードは次のとおりです:
22.右上のエフェクトを抽出するコードは次のとおりです:
23.ランダムな横線効果コードは次のとおりです:
24。ランダムな縦線エフェクトのコードは次のとおりです:
25。ランダム効果のコードは次のとおりです。

次に、これらのコードを分析してみましょう。まず、これらのコードのほとんどが非常に似ていることがわかります。実際、多くのカテゴリがありますが、各大カテゴリの下にある 25 のサブカテゴリは同じに対応しており、番号によって識別されるため (ブレンディング エフェクトの BlendTrans(Duration=1.0) を除く)、各大カテゴリを区別する必要はありません。たとえば、「Page-Enter」を「Page-Exit」(Web ページから離れる)、「Site-Enter」(サイトに入る)、「Site-Exit」(サイトから離れる)に置き換えるだけで、次のことが実現できます。必要な効果が得られ、覚えやすくなります。このうち「Duration=1.0」は各サイクルの時間を秒単位で設定できます(現在の設定は1サイクルあたり1秒)。 なお、1つのWebページ内で4つの大カテゴリの効果を同時に設定できますが、各大カテゴリに対して設定できる効果は1つだけです。また、Webページがフレームページの場合、エフェクトは表示されません。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。