작동 중인 CSS3 클립 경로 속성: 동적 영역 자르기

이 기사에서는 CSS3 클립 경로(클리핑 경로)를 이해하고 클립 경로를 사용하여 동적 영역 자르기를 수행하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

오늘 CodePen을 방문하여 흥미로운 효과를 보았습니다.

CodePen 데모 - Bennett Feely의 머티리얼 디자인 메뉴

웹사이트: https://codepen.io/bennettfeely/pen/ fHdFb

이 효과에 대해 탐구하고 배울 가치가 있는 몇 가지 사항이 아직 남아 있습니다.

어떻게 비슷한 효과를 얻을 수 있나요?

우선 생각해보세요. 위와 같은 효과를 달성하라는 요청을 받는다면 어떻게 하시겠습니까?

여기에는 몇 가지 가능한 방법이 나열되어 있습니다.

• shadow box-shadow

• gradient Radial-gradient

• scale 변환: scale()

빠르게 하나씩 살펴보세요.

box-shadow를 사용하여 구현

box-shadow를 사용하는 경우 코드는 대략 다음과 같습니다. 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

핵심은 다음과 같습니다.

바깥쪽은 overflow: hideen code>의 마스크

🎜🎜🎜내부 요소가 마우스로 가리키면 box-shadow: 0 0 0 0 #fff를 box-shadow: 0 0으로 구현합니다. 0 420px #fff 변경 사항 🎜🎜🎜🎜의 효과는 다음과 같습니다: 🎜🎜<img src="https://img.php.cn/upload/image/111/482/531/1639966528900310.%20gif" title="1639966528900310.gif" alt="작동 중인 CSS3 클립 경로 속성: 동적 영역 자르기">🎜🎜전체 애니메이션은 시뮬레이션되었지만 가장 치명적인 문제는 두 가지입니다. 🎜🎜🎜🎜마우스가 원을 벗어나면 전체 애니메이션이 시작됩니다. 역방향으로 진행 이제 흰색 영역이 사라지기 시작합니다. 애니메이션이 확장된 후 사각형에 숨겨진 요소는 배치하기가 쉽지 않습니다. /code> 좋아 보여도 포기할 수 밖에 없어요. 🎜🎜🎜위 데모의 코드 - CodePen 데모 - 애니메이션 상자 그림자 확대🎜🎜웹사이트: https://codepen.io/Chokcoco/pen/jOLRQNy🎜🎜<h3 id="item-2-2"> 그라데이션 방사형 그라데이션을 사용하여 🎜🎜 아래에서는 방사형 그라데이션 <code>방사형 그라데이션과 CSS @property를 사용하여 위의 효과를 복원합니다. 🎜rrreeerrreee🎜우리는 마우스를 가져갈 때 방사형 그라데이션의 애니메이션 효과를 제어합니다. , 원래 작은 원 배경이 큰 원 배경이 됩니다. 🎜🎜🎜🎜emmm 효과는 정말 복구됐고 문제도 치명적이네요: 🎜🎜🎜🎜백그라운드의 변화이므로 마우스는 필요없습니다 원에서 div의 범위만 입력하면 애니메이션이 시작됩니다. 이는 분명히 잘못된 첫 번째 box-shadow 방법입니다. 탐색 요소를 흰색 아래에 숨깁니다. DOM은 배치하기 쉽지 않습니다.🎜🎜🎜🎜🎜위 데모의 코드--CodePen 데모--방사형 그라데이션 확대 애니메이션🎜🎜웹사이트: https://codepen.io/Chokcoco /pen/RwZOqWb🎜🎜🎜emm, 또 다른 방법이 있습니다. transform: scale() 크기 조정을 통한 이 방법에도 특정 문제가 있으므로 여기서는 확장하지 않겠습니다. 🎜🎜여기서 위의 효과를 얻으려면 핵심은 다음과 같습니다. 🎜🎜🎜🎜애니메이션을 시작하려면 마우스를 원 위에 올려 놓아야 하며, 애니메이션 효과를 철회하지 않고 확장된 범위 내에서 마우스를 자유롭게 움직일 수 있습니다🎜 🎜🎜🎜애니메이션이 확장된 후 내부 DOM 배치가 크게 번거롭지 않아야 합니다. Javascript를 사용하지 않고 콘텐츠 표시 및 숨기기를 제어하는 ​​것이 가장 좋습니다.🎜🎜🎜

사용 동적 영역 자르기를 구현하기 위한 클립 경로🎜🎜여기에는 실제로 동적 영역 자르기가 필요합니다. 🎜🎜이 기사에서- 오버플로: 숨김을 사용하지 않고 오버플로: 숨김을 구현하는 방법은 무엇입니까? 에서는 CSS에서 요소를 클립하는 여러 가지 방법을 소개하고 있으며 그 중 이 효과를 활용하는 데 가장 적합한 방법은 clip-path입니다. 🎜🎜clip-path를 사용하면 동적 자르기 기능을 매우 잘 구현할 수 있으며 코드도 매우 간단합니다. 🎜rrreeerrreee🎜clip-path만 사용하면 됩니다. , 처음에는 clip-path: Circle(20px at 44px 44px)를 사용하여 직사각형 div를 원으로 자릅니다. 마우스를 가져가면 절단 원의 반경을 전체 직사각형 범위로 확장할 수 있습니다. . 🎜🎜효과는 다음과 같습니다.🎜🎜🎜🎜

这样，我们就能完美的实现题图的效果，并且，内置的 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视频教程）

위 내용은 작동 중인 CSS3 클립 경로 속성: 동적 영역 자르기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!