CSS MASK フィルターの賢い使い方_基本チュートリアル

マスク フィルターを使用すると、Web ページ上の HTML 要素オブジェクトに対して長方形のマスクを作成できます。マスクとは何ですか? Flash でマスクを使用したことがある場合は、それがそのようなものであることがわかるでしょう。実際、マスキングもこのように理解できます。これは、オブジェクトを色の付いた布で覆うことに相当しますが、中身は掘り出されます。それでも理解できない場合は、下の図を見て詳しく説明します。

図 1 マスク フィルター効果 1

上のマスク フィルターでこのような暗い色を使用します。効果がはっきりとわかるということ。マスク フィルターのパラメーターを見てみましょう。マスク フィルターにはパラメーター Color が 1 つだけあり、これは #RRGGBB 形式のマスクのカラー値です。 DW3 で適切な色を選択するだけです。たとえば、上記のマスク フィルター コードは次のとおりです: .mask1 { filter:mask(color=#00ff00) }. 次の例では、実際に、フィルターの色は重要ではなく、重要なのは背景の色です。
次に、マスク フィルタを使用していくつかの特殊効果を作成します。
1. カラフルなテキスト

図 2 マスクフィルター効果２

上記の効果はどうでしょうか？ちょっとイメージ通りですよね。これがマスクフィルターの効果です。ここでは白いフィルターが使用されており、そのコードは .mask1 { filter:mask(color=#ffffff) } です。カラフルな文字の色は、実際には背景の色です。作成方法もとても簡単で、1*1の表を挿入し、その表にマルチカラーの背景を追加し、表に文字を入力し、セルにマスクフィルターを読み込むだけで完了です。 ！
2. サーチライトのアニメーション効果
次のサーチライトの効果は、Flash を使用するには多大な労力を必要としますが、CSS フィルターを使用して実現できるとは思いませんでした。サーチライトの効果はダイナミックなので、プロセスの写真は 2 枚しか撮れません。ダイナミックな効果を見たい場合は、私の言ったことに従って 1 枚作るか、私の家 (http://fym888. go.163.com）見てください。

図 3 サーチライトのアニメーション効果 1

図 4 サーチライト アニメーション効果 2

作成方法は次のとおりです。
この効果は上の例よりも少し複雑ですが、マウスを数回クリックするだけです。
1. 「親レイヤー」と呼ぶレイヤーを挿入します。このレイヤーは、表示するコンテンツ (テキストまたは画像) を配置するために使用されます。このレイヤーの上にレイヤーを挿入します。これをサブレイヤーと呼びます。これは主にマスキング効果を作成するために使用されます。
2. 親レイヤーのプロパティ パネルで表示ウィンドウを設定します。つまり、レイヤーの「クリップ」属性を設定します。この属性では、相対座標が使用されます。L と T は、レイヤーの座標です。左上隅、R と B は右下隅の座標です。後続のサブレイヤーは、設定したウィンドウにのみ表示されます。レイヤー属性パラメータ設定パネルは以下のとおりです。

図 5 レイヤー属性パネル

ここにあります。親レイヤーは「Layer4」ですが、ここでは親レイヤー全体を表示ウィンドウとして使用しています。つまり、子レイヤーが親レイヤーに移動すると表示され、親レイヤーの外には表示されません。
3. サブレイヤーに背景が透明な円形の画像を挿入します。ここで円形の画像を使用する主な目的は、サーチライトの投影が円のように見えることです。また、円の外側の画像部分は透明でなければなりません。それ以外の場合は、移動する長方形のボックスが表示されます。次に、親レイヤーの背景色と同じ色のマスクフィルターを子レイヤーに読み込み、親レイヤーのコンテンツを完全に覆うことができるように子レイヤーを拡大します。ブラウザは円形のみになりますが、画像のその部分が表示されます。これはまさに私たちが望んでいることです。
4. もちろん、サーチライトの効果を出したい場合は、Dreamweaver のタイムライン機能を使用して円形の領域を移動させる必要があります。 DW3 では、まず、親レイヤー コンテンツの先頭を覆うようにサブレイヤーにドラッグします。「Ctrl F9」を押してタイムライン パネルを表示し、サブレイヤーをタイムライン パネルにドラッグして、最後のフレームを100フレームにして、50フレーム目にキーフレームを挿入し、親レイヤーのコンテンツの最後尾にサブレイヤーの画像を重ね、「Loop」（ループ再生）と「Auto」（自動再生）を選択します。タイムラインパネル、すべてOKです。
複雑なアニメーションが完成しました。F12 を押して見てください。かっこいいと思いませんか? ！