Использование clip-path для достижения динамического отсечения области

внешний интерфейс JavaScript CSS

задний план

Я сегодня посетил CodePen и увидел такой очень интересный эффект:

CodePen Demo -- Material Design Menu By Bennett Feely

Этот эффект все еще имеет некоторые моменты, которые стоит изучить и изучить, давайте посмотрим на него вместе.

Как добиться такого подобного эффекта?

Прежде всего, подумайте, если бы вас попросили добиться вышеуказанного эффекта, что бы вы сделали?

Здесь я просто перечисляю некоторые возможные решения:

  1. теневой ящик-тень
  2. Градиент радиально-градиентный
  3. Преобразование масштаба: масштаб()

Быстро пройдите их один за другим.

Реализовано с помощью 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;
    }
}

Ядро:

  1. Внешний слой установленoverflow: hideenмаска
  2. Когда внутренний элемент зависает, реализуйтеbox-shadow: 0 0 0 0 #fffприбытьbox-shadow: 0 0 0 420px #fffИзменение

Эффект следующий:

Общая анимация смоделирована, но у нее есть две фатальные проблемы:

  1. Когда наша мышь покидает круг, вся анимация начинает переворачиваться, и белая область начинает исчезать.Если мы хотим выполнять операции с кнопками, это невозможно.
  2. Элементы, спрятанные внутри расширенного прямоугольника анимации, не так просто разместить

так,box-shadowВыглядит хорошо, но я могу только сдаться. Код приведенной выше демонстрации --CodePen Demo -- box-shadow zoom in animation

Реализовано с использованием градиентного радиального градиента

Ниже мы используем радиальный градиентradial-gradientДобавление CSS @property также может восстановить описанный выше эффект:

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

@property --size {
  syntax: '<length>';
  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;
    }
}

Управляя анимационным эффектом радиального градиента, при наведении курсора фон маленького круга становится фоном большого круга, и эффект выглядит следующим образом:

эммм, эффект действительно восстанавливается, и проблема тоже фатальная:

  1. Так как фон меняется, мышке не нужно наводить курсор на кружочек, а нужно только войти в диапазон div, и запустится анимация, что явно неправильно
  2. и первыйbox-shadowМетод аналогичен, DOM элементов навигации, скрытых под белым цветом, расположен не очень удачно.

Код приведенной выше демонстрации --CodePen Demo -- radial-gradient zoom in animation

эммм, есть еще один способ, путем масштабированияtransform: scale(), тоже будут какие-то проблемы, и мы не будем здесь дальше расширяться.

Итак, здесь, для достижения вышеуказанного эффекта, ядром является:

  1. Мышь должна навести курсор на круг, чтобы запустить анимацию, и мышь может свободно перемещаться в пределах расширенного диапазона, не сворачивая эффект анимации.
  2. После того, как анимация развернута, размещение 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)Вырежьте его в круг.При наведении курсора расширьте радиус вырезаемого круга на весь прямоугольник.

Эффект следующий:

Таким образом, мы можем отлично добиться эффекта карты заголовков, а встроенные 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

Очень интересная техника, использующая clip-path для достижения динамического отсечения области, я надеюсь, что каждый сможет ее освоить.

наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории