CSS3 でのクリップパスの使用法についての紹介-CSSチュートリアル-php.cn

CSS3 でのクリップパスの使用法についての紹介

小云云

リリース： 2018-03-03 10:21:54

オリジナル

2521 人が閲覧しました

1. 基本コンセプト

QQ スペースダイナミックを更新すると、ユーザーがダイナミックリストを上下にスライドさせると、広告画像が自動的に切り替わります。この効果は、モバイルの小さな画面では間違いなく優れています。非常に微妙な配慮ですが、この効果はどのようにして実現されるのでしょうか?

次に、この効果の具体的な実装アイデアについて説明します。

2 つの画像を配置し、画像コンテナを基準にして重ね合わせます
の左上隅または右下隅にある円の中心を選択します。画像コンテナで円を描き、その円の半径を連続的に大きくして 2 番目の画像を表示します
上下にスワイプすると、スライド速度に応じて円の半径が動的に変更されます
画像コンテナと画面の上部または下部との距離が 0 の場合、画像の重なり順と円の中心位置がそれに応じて変更されます。

写真に円を描くと、2番目の写真が表示されるのはなぜですか?そういえば、今日の主役であるクリップパスについて話さなければなりません。MDN の説明を引用します。

clip-path 属性は、要素の一部のみを表示できるクリッピング領域を作成できます。領域内の部分が表示され、領域外の部分は非表示になります。クリッピング領域は、埋め込み URL または外部 SVG への参照によって定義されるパス、または Circle() などの形状として定義されます。 Clip-path プロパティは、現在非推奨になっている Clip プロパティを置き換えます。

clip-path はクリッピングパスを意味します。指定された閉じたパスまたは形状、または SVG の ClipPath タグで定義された形状を通じて、保持する必要がある領域の一部が切り取られ、Web でのレイアウト実装が可能になります。ページは多様にすることができます。

clip-pathが登場する前は、CSS2.1のclip属性にもクリッピング効果がありましたが、それは長方形のみをサポートし、position:absoluteまたはposition:fixedを持つ要素にのみ効果がありました。使用方法は次のとおりです。

注: Rect パラメーターの順序は、上、右、下、左です

すべての主流ブラウザーは、スプライト画像 (CSS スプライト) の表示に依然としてクリップ属性をサポートしています。クリップ属性、クリップはクリップパスに置き換えられました。通常の開発では、border や border-radius などの属性を使用して、三角形、円、角丸四角形などの単純なパターンを作成できます。これを SVG の path、animate、その他のタグと組み合わせることで、より多くの可能性を提供します。面白いパターンが増えました。

2. 使い方の練習

クリップパス属性は、円、楕円、多角形、インセットなどの多くのグラフィックを切り出すことができ、アニメーションや SVG の ClipPath タグも使用できます。

circle

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器

ログイン後にコピー

ellipse

clip-path: circle(25% at 50% 50%);

ログイン後にコピー

inset

clip-path: ellipse(25% 25% at 50% 50%);

ログイン後にコピー

polygon

clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);

ログイン後にコピー

url

clip-path: polygon(50% 0, 25% 50% ,75% 50%);

ログイン後にコピー

SVGのclipPathタグを使用してanimateをラップできることは言及する価値があります。animateタグのattributeNameは、円の半径の値はアニメーションのフレームを設定でき、dur はアニメーションの継続時間を指し、repeatCount はアニメーションの数を指します。セミコロンで区切って複数の値を指定できます。

互換性

現在、IE も Edge もこの属性をサポートしていません。 Firefox はクリップパスを部分的にのみサポートします。つまり、インライン SVG のシェイプと URL(#path) 構文のみをサポートします。 Chrome、Safari、および Opera では、このプロパティと互換性を持たせるために -webkit- プレフィックスが必要です。外部 SVG 形状はサポートされていません。互換性の詳細については、ここをクリックしてクリップパスブラウザの互換性を確認してください。

3. 体験の概要

URL (#path) インライン SVG を使用すると、複雑な形状を簡単に切り出すことができ、トランプやポーカーゲームでの賭けなどの鮮やかなアニメーション効果を含めることもできます。カウントダウンにマスクを追加したり、四角形の端にカウントダウンの進行状況を追加したり、アニメーションをロードしたりすることはすべて、clip-path 属性を使用して賢く実装できます。同時に、clip-path 属性を使用してグラフィックスをトリミングする場合も同様です。相対単位を柔軟に使用できます。