CSS3-Clip-Path-Eigenschaft in Aktion: dynamisches Zuschneiden von Bereichen

Dieser Artikel führt Sie in das Verständnis von CSS3 Clip-Path (Beschneidungspfad) ein und stellt vor, wie Sie Clip-Path zum dynamischen Zuschneiden von Bereichen verwenden. Ich hoffe, dass er für alle hilfreich ist!

Ich habe heute CodePen besucht und einen so interessanten Effekt gesehen:

CodePen Demo – Material Design Menu von Bennett Feely

Website: https://codepen.io/bennettfeely/pen/ fHdFb

Es gibt noch einige Punkte, die es wert sind, über diesen Effekt untersucht und gelernt zu werden.

Wie kann man einen so ähnlichen Effekt erzielen?

Denken Sie zunächst darüber nach: Was würden Sie tun, wenn Sie gebeten würden, den oben genannten Effekt zu erzielen?

Hier liste ich einfach einige mögliche Methoden auf:

• shadow box-shadow

• gradient radial-gradient

• scale transform: scale()

Gehen Sie sie schnell einzeln durch.

Verwenden Sie Box-Shadow zum Implementieren

Wenn Sie box-shadow verwenden, lautet der Code ungefähr wie folgt: box-shadow，代码大致如下：

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

.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;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

核心就在于：

• 外层一个设置了 overflow: hideen 的遮罩

• 内层元素 hover 的时候，实现一个 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的变化

效果如下：

整体的动画是模拟出来了，但是它最致命的问题有两个：

• 当我们的鼠标离开圆形的时候，整个动画就开始反向进行了，白色区域开始消失，如果我们要进行按钮操作，是无法完成的

• 隐藏在动画展开后的矩形内的元素，不容易放置

所以，box-shadow 看着虽好，但是只能放弃。

上述 Demo 的代码 -- CodePen Demo -- box-shadow zoom in animation

网址：https://codepen.io/Chokcoco/pen/jOLRQNy

使用渐变 radial-gradient 实现

下面我们使用径向渐变 radial-gradient 加上 CSS @property，也可以还原上述效果：

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

@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;
    }
}

我们通过控制径向渐变的动画效果，在 hover 的时候，让原本只是一个小圆背景，变成一个大圆背景，效果如下：

emmm，效果确实是还原了，问题也很致命：

• 由于是背景的变化，所以鼠标不需要 hover 到小圆上，只需要进入 div 的范围，动画就会开始，这显然是不对的

• 和第一种 box-shadow 的方法类似，隐藏在白色之下的导航元素的 DOM 不好放置

上述 Demo 的代码 -- CodePen Demo -- radial-gradient zoom in animation

网址：https://codepen.io/Chokcoco/pen/RwZOqWb

emmm，还有一种方法，通过缩放 transform: scale()，也会存一定问题，这里不继续展开。

所以到这里，想实现上述的效果，核心在于：

• 鼠标要 hover 到圆上，才能开始动画，并且，鼠标可以在展开后的范围内自由移动，且不会收回动画效果

• 动画展开后，里面的 DOM 的放置，不能太麻烦，能不借助 Javascript 去控制里面内容的显示隐藏最好

利用 clip-path 实现动态区域裁剪

所以，这里，我们其实是需要一个动态的区域裁剪。

在我的这篇文章中 -- 如何不使用 overflow: hidden 实现 overflow: hidden？，介绍了 CSS 中几种裁剪元素的方式，而其中，最适合利用在这个效果的，就是 -- clip-path。

利用 clip-path，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：

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

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

我们只需要利用 clip-path，在最开始的时候，将一个矩形 div，利用 clip-path: circle(20px at 44px 44px)

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

rrreee

Der Kern ist:

Der äußere wird mit overflow: hideen code>'s mask

🎜🎜🎜Wenn das innere Element schwebt, implementieren Sie einen box-shadow: 0 0 0 0 #fff zu box-shadow: 0 0 0 420px #fff Die Auswirkung der Änderung 🎜🎜🎜🎜 ist wie folgt: 🎜🎜<img src="https://img.php.cn/upload/image/111/482/531/1639966528900310.%20gif" title="1639966528900310.gif" alt="CSS3-Clip-Path-Eigenschaft in Aktion: dynamisches Zuschneiden von Bereichen">🎜🎜Die gesamte Animation wird simuliert, aber die schwerwiegendsten Probleme sind zwei: 🎜🎜🎜🎜Wenn unsere Maus den Kreis verlässt, beginnt die gesamte Animation Fahren Sie in umgekehrter Reihenfolge fort. Wenn wir Schaltflächenvorgänge ausführen möchten, können die im animierten erweiterten Rechteck verborgenen Elemente nicht einfach platziert werden code>box-shadow code> Obwohl es gut aussieht, kann ich nur aufgeben. 🎜🎜🎜Code der obigen Demo – CodePen-Demo – Box-Shadow-Zoom-Animation🎜🎜Website: https://codepen.io/Chokcoco/pen/jOLRQNy🎜🎜<h3 id="item-2-2"> Verwenden Sie den radialen Farbverlauf, um Folgendes zu erreichen: 🎜🎜 Im Folgenden verwenden wir den radialen Farbverlauf <code>radial-gradient plus CSS @property, um den obigen Effekt wiederherzustellen: 🎜rrreeerrreee🎜Wir steuern den Animationseffekt des radialen Farbverlaufs beim Schweben , ändern Sie den Hintergrund von einem kleinen Kreis in einen großen Kreis. Der Effekt ist wie folgt: 🎜🎜🎜🎜emmm, der Effekt wird tatsächlich wiederhergestellt, und das Problem ist auch fatal: 🎜🎜🎜🎜Da es sich um eine Änderung im Hintergrund handelt, funktioniert die Maus nicht Sie müssen den Mauszeiger über den kleinen Kreis bewegen und nur den Bereich des Div eingeben. Dies ist offensichtlich falsch. Es ähnelt der ersten box-shadow-Methode. wodurch die Navigationselemente unter Weiß ausgeblendet werden. Der Code der obigen Demo – CodePen-Demo – Radial-Gradient-Zoom-Animation – Website: https://codepen.io/ Chokcoco/pen/RwZOqWb🎜🎜🎜emmm, es gibt noch eine andere Methode. Durch Skalierung von transform: scale() treten auch bestimmte Probleme auf, auf die hier nicht näher eingegangen wird. 🎜🎜Wenn Sie also den oben genannten Effekt erzielen möchten, lautet der Kern: 🎜🎜🎜🎜Die Maus muss über dem Kreis schweben, um die Animation zu starten, und die Maus kann sich innerhalb des erweiterten Bereichs frei bewegen, ohne den Animationseffekt einzuschränken🎜 🎜🎜🎜Nachdem die Animation erweitert wurde, sollte die Platzierung des DOM darin nicht allzu problematisch sein. Es ist am besten, die Anzeige und das Ausblenden des Inhalts ohne Verwendung von Javascript zu steuern. 🎜🎜🎜

Verwenden Sie Clip-Pfad zum Implementieren dynamischer Bereichsbeschneidung🎜🎜Hier benötigen wir also tatsächlich eine dynamische Bereichsbeschneidung. 🎜🎜In diesem Artikel von mir-- Wie implementiert man overflow:hidden, ohne overflow:hided zu verwenden? stellt mehrere Möglichkeiten zum Ausschneiden von Elementen in CSS vor. Die am besten geeignete für die Nutzung dieses Effekts ist clip-path. 🎜🎜Mit clip-path kann die dynamische Zuschneidefunktion sehr gut implementiert werden, und der Code ist auch sehr einfach: 🎜rrreeerrreee🎜Wir müssen nur clip-path verwenden , Zu Beginn verwenden Sie clip-path: circle(20px at 44px 44px), um ein rechteckiges Div in einen Kreis zu schneiden. Erweitern Sie beim Schweben den Radius des Schnittkreises auf den gesamten rechteckigen Bereich . 🎜🎜Die Wirkung ist wie folgt:🎜🎜🎜🎜

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

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

效果如下：

CodePen Demo -- clip-path zoom in animation

网址：https://codepen.io/Chokcoco/pen/yLorrRm

很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonCSS3-Clip-Path-Eigenschaft in Aktion: dynamisches Zuschneiden von Bereichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!