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>

核心は次のとおりです:

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

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

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

効果は次のとおりです。

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

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

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

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

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

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

CSS @propertyを追加すると、上記の効果を復元することもできます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;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><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;div class=&quot;g-container&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>放射状グラデーションのアニメーション効果を制御することで、ホバリング時に元の小さな円の背景が大きな円の背景になります。その効果は次のとおりです:

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

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

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

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

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

transform:scale()

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

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

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>

効果は次のとおりです:

这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

效果如下：