CSS3 クリップパス プロパティの動作: 動的領域のトリミング

この記事では、CSS3 のクリップパス (クリッピングパス) を理解し、クリップパスを使用して動的領域トリミングを実現する方法を紹介します。

今日 CodePen にアクセスして、非常に興味深い効果を確認しました:

CodePen デモ -- マテリアル デザインBennett Feely によるメニュー

Web サイト: https://codepen.io/bennettfeely/pen/fHdFb

この効果については、探索して学ぶ価値のある点がまだいくつかあります。見てください、立ち上がって見てください。

同様の効果を達成するにはどうすればよいでしょうか?

まず考えてみてください。上記の効果を達成するように求められたら、あなたはどうしますか?

ここでは、可能な方法をいくつか列挙します:

• shade box-shadow

• gradientradial-gradient

• スケール変換:scale()

1 つずつ簡単に説明します。

box-shadow を使用して次のことを実現します

box-shadow を使用する場合、コードはおおよそ次のとおりです:

<div class="g-container">
    <div class="g-item"></div>
</div>

rrree

核心は次のとおりです:

• 外側の層には、overflow: hiddenenでマスク セットが設定されています。

• ##内側の要素がホバーしているとき、## を実装します。 #box-shadow : 0 0 0 0 #fff

  から box-shadow: 0 0 0 420px #fff 変更

効果は次のとおりです。

アニメーション全体はシミュレートされていますが、最も致命的な問題は 2 つあります。

マウスが円から離れると、全体がアニメーション 逆にアニメーションが進み、白い部分が消え始めます ボタン操作をしたくても完了できません
アニメーション後の四角形内に隠れている要素
ということで、

box-shadow

が良さそうですが、諦めるしかありません。

上記のデモのコード--CodePen デモ--box-shadow ズームインアニメーション

ウェブサイト: https://codepen.io/Chokcoco/pen/jOLRQNy

グラデーションのradial-gradientを使用して実現します

以下では、放射状のグラデーションを使用します

radial-gradient

CSS @propertyを追加すると、上記の効果を復元することもできます: <pre class='brush:php;toolbar:false;'>.g-container { position: relative; width: 400px; height: 300px; overflow: hidden; } .g-item { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #fff; top: 20px; left: 20px; box-shadow: 0 0 0 0 #fff; transition: box-shadow .3s linear; &amp;:hover { box-shadow: 0 0 0 420px #fff; } }</pre><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;g-container&quot;&gt;&lt;/div&gt;</pre>放射状グラデーションのアニメーション効果を制御することで、ホバリング時に元の小さな円の背景が大きな円の背景になります。その効果は次のとおりです:

#emmm,効果は実際に復元され、問題も致命的です。

これは背景の変更であるため、マウスを小さな円の上に置く必要はありません。マウスを置くだけで済みます。 div の範囲を入力すると、アニメーションが開始されます。これは明らかに間違っています

• 最初の
box-shadow
• メソッドと同様に、ナビゲーションの DOM白の下に隠れている要素は配置するのが簡単ではありません

上記のデモのコード -- CodePen デモ -- アニメーションの放射状グラデーション ズーム

Web サイト: https://codepen.io/Chokcoco/pen/RwZOqWb

えっと、別の方法があります。

transform:scale()

をスケーリングすることで、特定の問題が発生します。ここでこれ以上拡張するつもりはありません。

したがって、ここで、上記の効果を実現したい場合の核心は次のとおりです。

アニメーションを開始するには、マウスを円の上に置く必要があります。アニメーション効果を引き込まずに範囲内を自由に移動します

• アニメーションを展開した後、内部の DOM の配置はそれほど面倒ではありません。 Javascript を使用せずに、内部のコンテンツの表示と非表示を制御できます。
動的領域トリミング
• 。
  私の記事 --
overflow: hidden を使用せずに overflow: hidden を実装するにはどうすればよいですか?

では、CSS で要素をクリップするいくつかの方法を紹介します。その中で、この効果を使用するのに最も適した方法は --

clip-path

です。

clip-path

を使用すると、動的クリッピング関数を非常に適切に実装でき、コードも非常に単純になります。

@property --size {
  syntax: &#39;<length>&#39;;
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

<div class="g-container"></div>

使用する必要があるのは だけです。 Clip -path、最初に clip-path:circle(20px at 44px 44px)

を使用して、長方形の div を円に切り取ります。ホバリング時に、切り取り円の半径を拡大します。長方形の範囲全体。

効果は次のとおりです:

<p>这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。</p><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;g-container&quot;&gt; &lt;ul&gt; &lt;li&gt;11111&lt;/li&gt; &lt;li&gt;22222&lt;/li&gt; &lt;li&gt;33333&lt;/li&gt; &lt;li&gt;44444&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre><p>效果如下：</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/842/445/385/1639966589916454.gif?x-oss-process=image/resize,p_40" class="lazy" title="1639966589916454.gif" alt="CSS3 クリップパス プロパティの動作: 動的領域のトリミング"></p> <blockquote> <p>CodePen Demo -- clip-path zoom in animation</p> <p>网址：https://codepen.io/Chokcoco/pen/yLorrRm</p> </blockquote> <p>很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。</p> <h2 id="最后">最后</h2> <p>好了，本文到此结束，希望本文对你有所帮助 :)</p> <p>（学习视频分享：<a href="https://www.php.cn/course/list/12.html" target="_blank">css视频教程</a>）</p>

以上がCSS3 クリップパス プロパティの動作: 動的領域のトリミングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。