Говоря о свойстве фильтра CSS3 из крутого меню желе

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

Говоря о свойстве фильтра CSS3 из крутого меню желе

При чистке точки кипения Наггетс сегодня в полдень я увиделJerry Menu, выглядит хорошо, так же, как обучение (копирование) обучение (копирование). Схема эффекта выглядит следующим образом:

jerrymenu效果图

Здесь я хочу узнать (копировать) узнать (копировать) это эффект меню, структура dom по-прежнему очень проста.

div.blobs
    div.circle.main
    div.circle.sub.first
    div.circle.sub.second
    div.circle.sub.last

Украсьте его с помощью CSS:

.blobs {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.circle {
	position: absolute;
	width: 90px;
	height: 90px;
	transform: translate(0, -48px);
	background: hsl(337, 70%, 58%);
	clip-path: circle(42px at center);
}

.circle.main {
    z-index: 2;
}

Чтобы достичь целевого эффекта более непосредственно, не делайте сначала анимацию, сначала напишите положение каждого меню:

.first {
	transform: translate(-100px, -120px);
	background: hsl(307, 70%, 58%);
}

.second {
    transform: translate(0px, -150px);
	background: hsl(277, 70%, 58%);
}

.last {
    transform: translate(100px, -120px);
	background: hsl(247, 70%, 58%);
}

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

image

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

const button = document.querySelector(".circle.main");
const circles = document.querySelectorAll(".circle.sub");

button.addEventListener("click", function() {
  circles.forEach(element => {
    element.classList.toggle("show");
  });
});

Соответственно, CSS также следует изменить:

.first {
	transition: transform 0.5s 100ms ease-out;
	background: hsl(307, 70%, 58%);
}

.second {
	transition: transform 0.5s 300ms ease-out;
	background: hsl(277, 70%, 58%);
}

.last {
	transition: transform 0.5s 500ms ease-out;
	background: hsl(247, 70%, 58%);
}

.first.show {
	transform: translate(-100px, -120px);
}

.second.show {
	transform: translate(0px, -150px);
}

.last.show {
	transform: translate(100px, -120px);
}

В это время эффект почти такой же:

jerrymenu_0

Но я всегда чувствую, что что-то не так.Эффект прилипания пропал.Давайте посмотрим на исходный авторский эффект:

jerrymenu效果图

Я быстро просмотрел исходный код автора и обнаружил, что автор добавил.blobs { filter: url(#goo); }Для такого эффекта фильтра посмотрите документ и прочитайте его:

Свойства фильтра CSS, которые могут обеспечивать некоторые эффекты для рендеринга элемента, такие как размытие, передача цвета и т. д., перед рендерингом элемента. Фильтры часто используются для настройки рендеринга изображений, фона и границ. Ресурсы фильтра SVG (источники фильтра SVG) относятся к набору эффектов фильтра svg, определенному в формате файла xml, который можно импортировать через URL-адрес и указать конкретный элемент фильтра через точку привязки (#element-id).

установить сноваfilterПосле фильтрации и добавления соответствующего svg-кода эффект всего Jerry Menu изучается (копируется) и изучается (копируется), и эффект выглядит следующим образом:

jerrymenu_1

Вот информация о фильтре на MDNДокументация.

Категории