얼마 전, Geoff는 시원한 호버 효과에 관한 기사를 썼습니다. 효과는 CSS 의사 요소, 변환 및 전환의 조합에 의존합니다. 많은 의견에 따르면 배경 속성을 사용하여 동일한 효과를 수행 할 수 있습니다. Geoff는 그것이 그의 초기 생각이라고 언급했으며 그것이 제가 생각했던 것입니다. 나는 그가 착륙 한 의사 요소가 나쁘다고 말하지는 않지만 같은 효과를 달성하는 다른 방법을 아는 것은 좋은 일이 될 수 있습니다.
이 게시물에서는 호버 효과를 재 작업 할뿐만 아니라 CSS 배경 속성 만 사용하는 다른 유형의 호버 효과로 확장 할 것입니다.
해당 데모의 직장에서 배경 속성과 사용자 지정 속성과 calc () 함수를 사용하여 더 많은 작업을 수행 할 수있는 방법을 볼 수 있습니다. 우리는이 모든 것을 결합하는 방법을 배우므로 잘 최적화 된 코드로 남겨 둡니다!
그의 기사에서 Geoff가 자세히 설명한 첫 번째 효과로 시작하겠습니다. 해당 효과를 달성하는 데 사용되는 코드는 다음과 같습니다.
.hover-1 {
배경 : 선형 그레이드 (#1095c1 0 0) var (-p, 0) / var (-p, 0) no-Repeat;
전환 : .4S, 배경 위치 0s;
}
.hover-1 : 호버 {
--p : 100%;
색상 : #fff;
}색상 전환 (선택 사항)을 생략하면 효과를 달성하기 위해 세 가지 CSS 선언 만 있으면됩니다. 코드가 얼마나 작은 지 놀랐을 것입니다. 그러나 우리가 어떻게 그곳에 도착했는지 알게 될 것입니다.
먼저 간단한 배경 크기 전환부터 시작하겠습니다.
우리는 선형 그라디언트의 크기를 0 100%에서 100% 100%로 애니메이션하고 있습니다. 즉, 배경 자체는 전체 높이를 유지하는 반면 폭은 0에서 100%로 증가합니다. 지금까지 복잡한 것은 없습니다.
최적화를 시작합시다. 먼저 그라디언트를 변환하여 색상을 한 번만 사용합니다.
배경 이미지 : 선형 그레이드 (#1095c1 0 0);
구문은 약간 이상하게 보일 수 있지만 브라우저에 하나의 색상이 두 개의 색상 정지에 적용되었으며 CSS의 그라디언트를 정의하기에 충분합니다. 두 색상 정지 모두 0이므로 브라우저는 자동으로 마지막 10%를 만들고 그라디언트를 동일한 색상으로 채 웁니다. 바로 가기, FTW!
배경 크기를 사용하면 그라디언트가 기본적으로 전체 높이이기 때문에 높이를 생략 할 수 있습니다. 우리는 배경 크기에서 0에서 배경 크기로 전환 할 수 있습니다 : 100%.
.hover-1 {
배경 이미지 : 선형 그레이드 (#1095c1 0 0);
배경 크기 : 0;
배경 반복 : 비 반복;
전환 : .4S;
}
.hover-1 : 호버 {
배경 크기 : 100%;
}배경 크기의 반복을 피하기 위해 사용자 정의 속성을 소개하겠습니다.
.hover-1 {
배경 이미지 : 선형 그레이드 (#1095c1 0 0);
배경 크기 : var (-p, 0%);
배경 반복 : 비 반복;
전환 : .4S;
}
.hover-1 : 호버 {
--p : 100%;
}우리는 처음에 - -p를 정의하지 않으므로 폴백 값 (우리의 경우 0%)이 사용됩니다. 호버에서는 폴백 값을 대체하는 값 (100%)을 정의합니다.
이제 속기 버전을 사용하여 모든 배경 속성을 결합하여 다음과 같습니다.
.hover-1 {
배경 : 선형 그레이드 (#1095c1 0 0) 왼쪽 / var (-p, 0%) 비 반복;
전환 : .4S;
}
.hover-1 : 호버 {
--p : 100%;
}우리는 점점 가까워지고 있습니다! 배경 속기의 크기를 정의 할 때 필수 인 왼쪽 값 (배경 위치)을 도입했습니다. 또한, 우리는 호버 효과를 달성하기 위해 어쨌든 그것을 필요로합니다.
또한 호버 위치를 업데이트해야합니다. 우리는 두 단계로 할 수 있습니다.
이렇게하려면 호버의 배경 위치를 업데이트해야합니다.
코드에 두 가지를 추가했습니다.
이것은 호버에서 배경 위치를 왼쪽에서 즉시 바꾸어야한다는 것을 의미합니다 (그 값이 필요합니다!). 배경의 크기가 오른쪽에서 증가 할 수 있습니다. 그런 다음 마우스 커서가 링크를 떠날 때 전환은 오른쪽에서 왼쪽으로 역전하여 왼쪽에서 배경 크기를 줄이는 것으로 보입니다. 우리의 호버 효과가 완료되었습니다!
그러나 당신은 우리가 3 개의 선언 만 필요하며 4 개가 있다고 말했습니다.
사실, 좋은 캐치입니다. 왼쪽 및 오른쪽 값은 각각 0 0과 100% 0으로 변경 될 수 있습니다. 그리고 그라디언트는 이미 기본적으로 전체 높이이므로 0과 100%를 사용하여 얻을 수 있습니다.
.hover-1 {
배경 : 선형 등급 (#1095c1 0 0) 0 / var (-P, 0%) 비 반복;
전환 : .4S, 배경 위치 0s;
}
.hover-1 : 호버 {
--p : 100%;
배경 위치 : 100%;
}배경 위치와 -P가 동일한 값을 사용하는 방법을 보십니까? 이제 코드를 세 가지 선언으로 줄일 수 있습니다.
.hover-1 {
배경 : 선형 등급 (#1095c1 0 0) var (-P, 0%) / var (-P, 0%) NO-Repeat;
전환 : .4S, 배경 위치 0s;
}
.hover-1 : 호버 {
--p : 100%;
}사용자 정의 속성 -P는 배경 위치와 크기를 모두 정의합니다. 호버에서는 두 가지 모두 업데이트됩니다. 이것은 사용자 정의 속성이 중복 코드를 줄이고 속성을 두 번 이상 쓰지 않도록 도와주는 방법을 보여주는 완벽한 사용 사례입니다. 사용자 정의 속성을 사용하여 설정을 정의하고 후자는 호버에서만 업데이트합니다.
그러나 Geoff가 묘사 한 효과는 왼쪽에서 시작하여 오른쪽에서 끝나는 반대입니다. 우리가 같은 변수에 의존 할 수없는 것처럼 보일 때 어떻게합니까?
우리는 여전히 하나의 변수를 사용하고 코드를 약간 업데이트하여 반대 효과를 달성 할 수 있습니다. 우리가 원하는 것은 0%에서 100% 대신 100%에서 0%로 이동하는 것입니다. 우리는 다음과 같이 calc ()를 사용하여 표현할 수있는 100% 차이가 있습니다.
.hover-1 {
배경 : 선형 등급 (#1095c1 0 0) calc (100%-var (-p, 0%)) / var (-p, 0%) No-Repeat;
전환 : .4S, 배경 위치 0s;
}
.hover-1 : 호버 {
--p : 100%;
}-P는 0%에서 100%로 변경되지만 Calc () 덕분에 배경 위치는 100%에서 0%로 변경됩니다.
우리는 여전히 세 가지 선언과 하나의 사용자 정의 속성이 있지만 다른 효과가 있습니다.
우리가 다음 호버 효과로 이동하기 전에, 나는 당신이 알아 차린 중요한 것을 강조하고 싶습니다. 사용자 정의 속성을 처리 할 때는 단위가없는 0 대신 0% (단위와 함께)를 사용하고 있습니다. 단위리스 0은 사용자 정의 속성이 단독 일 때 작동 할 수 있지만 Calc () 내부에서 실패하여 장치를 명시 적으로 정의해야합니다. 이 기발한 설명을 위해 다른 기사가 필요할 수도 있지만 사용자 정의 속성을 다룰 때는 항상 장치를 추가해야합니다. StackoverFlow (여기 및 여기)에 대해 자세히 설명하는 두 가지 답변이 있습니다.
이 효과에 대해 더 복잡한 전환이 필요합니다. 무슨 일이 일어나고 있는지 이해하기 위해 단계별 삽화를 살펴 보겠습니다.
먼저 배경 위치 전환과 배경 크기 전환이 있습니다. 이것을 코드로 번역합시다.
.hover-2 {
배경 이미지 : 선형 그레이드 (#1095c1 0 0);
배경 크기 : 100% .08EM; /* .08EM은 우리의 고정 높이입니다. 필요에 따라 수정하십시오. */
배경 위치 : /* ??? */;
배경 반복 : 비 반복;
전환 : 배경 크기 .3s, 배경 위치 .3s .3s;
}
.hover-2 : 호버 {
전환 : 배경 크기 .3s .3s, 배경 위치 .3s;
배경 크기 : 100% 100%;
배경 위치 : /* ??? */;
}두 가지 전이 값의 사용에 유의하십시오. 호버에서는 먼저 위치와 나중에 크기를 변경해야하므로 크기에 지연이 추가됩니다. 마우스에서, 우리는 반대입니다.
문제는 이제 : 배경 위치에 어떤 가치를 사용합니까? 우리는 그 공란을 위에 남겨 두었습니다. 배경 크기의 값은 사소하지만 배경 위치의 값은 그렇지 않습니다. 실제 구성을 유지하면 그라데이션을 이동할 수 없습니다.
우리의 그라디언트는 폭이 100%에 해당하므로 배경 위치에서 백분율 값을 사용하여 이동할 수 없습니다.
배경 위치에 사용되는 백분율 값은 특히 처음으로 사용할 때 항상 고통입니다. 그들의 행동은 직관적이지 않지만 잘 정의되고 우리가 그 뒤에 논리를 얻으면 이해하기 쉽습니다. 왜 이런 식으로 작동하는지 전체 설명을 위해 다른 기사가 필요할 것이라고 생각하지만 여기에 Stack Overflow에 게시 한 또 다른 "긴"설명이 있습니다. 그 답을 읽는 데 몇 분이 걸리는 것이 좋습니다. 나중에 감사드립니다!
속임수는 너비를 100%와 다른 것으로 바꾸는 것입니다. 200%를 사용합시다. 오버플로가 어쨌든 숨겨져 있기 때문에 배경이 요소를 초과하는 것에 대해 걱정하지 않습니다.
.hover-2 {
배경 이미지 : 선형 그레이드 (#1095c1 0 0);
배경 크기 : 200% .08EM;
배경 위치 : 200% 100%;
배경 반복 : 비 반복;
전환 : 배경 크기 .3s, 배경 위치 .3s .3s;
}
.hover-2 : 호버 {
전환 : 배경 크기 .3s .3s, 배경 위치 .3s;
배경 크기 : 200% 100%;
배경 위치 : 100% 100%;
}그리고 여기에 우리가 얻는 것이 있습니다.
이제 코드를 최적화 할 때입니다. 첫 번째 호버 효과에서 배운 아이디어를 취하면 속기 속성을 사용 하고이 작업을 수행하기 위해 더 적은 선언을 작성할 수 있습니다.
.hover-2 {
배경:
선형 그레이드 (#1095c1 0 0) 비 반복
var (-p, 200%) 100% / 200% var (-P, .08EM);
전환 : .3S var (-t, 0s), 배경 위치 .3s calc (.3s- var (-t, 0s));
}
.hover-2 : 호버 {
--p : 100%;
--T : .3S;
}속기 버전을 사용하여 모든 배경 속성을 함께 추가 한 다음 -P를 사용하여 값을 표현합니다. 크기는 .08EM에서 100%로 변경되고 위치는 200%에서 100%로 변합니다.
또한 전환 속성을 최적화하기 위해 다른 변수 -T를 사용하고 있습니다. 마우스 호버에서 우리는 .3s 값으로 설정되어 있습니다.
전환 : .3S .3S, 배경 위치 .3S 0S;
마우스 아웃에서 - -t는 정의되지 않으므로 폴백 값이 사용됩니다.
전환 : .3S 0S, 배경 위치 .3S .3S;
전환에 배경 크기가 있어야합니까?
그것은 실제로 우리가 할 수있는 또 다른 최적화입니다. 속성을 지정하지 않으면 속성을 "모두"의미로 의미하므로 전환은 속성 (배경 크기 및 배경 위치 포함)에 대해 "모두"에 대해 정의됩니다. 그런 다음 백그라운드 크기에 대해 정의 한 다음 배경 위치를 정의하는 것과 유사한 배경 위치에 대해 다시 정의됩니다.
"비슷한"것은 무언가가 "동일"이라고 말하는 것과 다릅니다. 호버에서 더 많은 속성을 변경하면 차이가 표시되므로 마지막 최적화는 경우에 따라 부적합 할 수 있습니다.
여전히 코드를 최적화하고 하나의 사용자 정의 속성 만 사용할 수 있습니까?
예, 우리는 할 수 있습니다! Ana Tudor는 하나의 사용자 정의 속성이 여러 속성을 업데이트 할 수있는 드라이 스위칭을 만드는 방법을 설명하는 훌륭한 기사를 공유했습니다. 여기서는 세부 사항을 다루지 않지만 코드는 다음과 같이 수정할 수 있습니다.
.hover-2 {
배경:
선형 그레이드 (#1095c1 0 0) 비 반복
calc (200%-var (-i, 0) * 100%) 100% / 200% calc (100% * var (-i, 0) .08em);
전환 : .3S calc (var (-i, 0) * .3s), 배경 위치 .3s calc (.3s-calc (var (-i, 0) * .3s));
}
.hover-2 : 호버 {
--i : 1;
}-i 사용자 정의 속성은 처음에는 정의되지 않았으므로 폴백 값 0이 사용됩니다. 그러나 호버에서는 0을 1로 바꾸고 두 경우 모두 수학을 수행하고 각각의 값에 대한 값을 얻을 수 있습니다. 해당 변수를 호버에서 한 번에 모든 값을 업데이트하는 "스위치"로 볼 수 있습니다.
다시, 우리는 꽤 멋진 호버 효과를 위해 세 가지 선언으로 돌아 왔습니다!
우리는이 효과를 위해 하나 대신 두 개의 그라디언트를 사용합니다. 여러 그라디언트를 결합하는 것이 멋진 호버 효과를 만드는 또 다른 방법임을 알 수 있습니다.
우리가하는 일에 대한 다이어그램은 다음과 같습니다.
CSS의 모습은 다음과 같습니다.
.hover-3 {
배경 이미지 :
선형 그레이드 (#1095c1 0 0),
선형 그레이드 (#1095c1 0 0);
배경 반복 : 비 반복;
배경 크기 : 50% .08EM;
배경 위치 :
-100% 100%,
200% 0;
전환 : 배경 크기 .3s, 배경 위치 .3s .3s;
}
.hover-3 : 호버 {
배경 크기 : 50% 100%;
배경 위치 :
0 100%,
100% 0;
전환 : 배경 크기 .3s .3s, 배경 위치 .3s;
}코드는 우리가 다루는 다른 호버 효과와 거의 동일합니다. 유일한 차이점은 두 개의 다른 위치를 가진 두 개의 그라디언트가 있다는 것입니다. 위치 값은 이상하게 보일지 모르지만 다시 CSS에서 백분율이 배경 위치 속성과의 작동 방식과 관련이 있으므로 거친 세부 사항에 들어가려면 스택 오버 플로우 답변을 읽는 것이 좋습니다.
이제 최적화합시다! 당신은 지금까지 아이디어를 얻습니다 - 우리는 속성, 사용자 정의 속성 및 calc ()를 사용하여 물건을 정리합니다.
.hover-3 {
--c : 비 반복 선형 등급 (#1095c1 0 0);
배경:
var (-c) calc (-100% var (-p, 0%)) 100% / 50% var (-p, .08em),
var (-c) calc (200%-var (-p, 0%)) 0 / 50% var (-p, .08em);
전환 : .3S var (-t, 0s), 배경 위치 .3s calc (.3s- var (-t, 0s));
}
.hover-3 : 호버 {
--p : 100%;
--T : 0.3S;
}동일한 그라디언트가 두 곳에서 모두 사용되기 때문에 그라디언트를 정의하는 추가 사용자 정의 속성 인 - -c를 추가했습니다.
배경 크기에 대해 50% 대신 50.1%를 사용하고 있습니다. 그라디언트 사이에 간격이 표시되지 않기 때문입니다. 또한 비슷한 이유로 위치에 1%를 추가했습니다.
스위치 변수를 사용하여 두 번째 최적화를하겠습니다.
.hover-3 {
--c : 비 반복 선형 등급 (#1095c1 0 0);
배경:
var (-C) calc (-100% var (-I, 0) * 100%) 100% / 50% calc (100% * var (-I, 0) .08EM),
var (-c) calc (200%-var (-I, 0) * 100%) 0 / 50% calc (100% * var (-I, 0) .08EM);
전환 : .3S calc (var (-i, 0) * .3s), 배경 위치 .3s calc (.3s- var (-i, 0) * .3s);
}
.hover-3 : 호버 {
--i : 1;
}여기서 패턴을보기 시작 했습니까? 우리가하는 효과가 어렵다는 것은 그리 많지 않습니다. 코드 최적화의 "최종 단계"입니다. 우리는 많은 속성이있는 Verbose 코드를 작성하여 시작한 다음 간단한 규칙 (예 : 속기 사용, 기본값 제거, 중복 값을 피하기 등)에 따라 가능한 한 단순화하여 가능한 한 단순화합니다.
나는이 마지막 효과에 대한 난이도를 높일 것이지만, 당신은 다른 예에서 이것에 문제가있을 것입니다.
이 호버 효과는 두 개의 원뿔 구배 및 더 많은 계산에 의존합니다.
처음에는 1 단계에서 차원이 0 인 기울기를 모두 가지고 있습니다. 2 단계에서 각각의 크기를 증가시킵니다. 우리는 3 단계에서 볼 수 있듯이 요소를 완전히 덮을 때까지 폭을 계속 늘립니다. 그 후에는 바닥으로 밀어 위치를 업데이트합니다. 이것은 호버 효과의 "마법"부분입니다. 두 그라디언트 모두 동일한 색상을 사용하므로 4 단계에서 위치를 변경하면 시각적 차이가 없지만 5 단계에서 마우스의 크기를 줄인 후에 차이가 나타납니다.
2 단계와 5 단계를 비교하면 우리가 다른 성향이 있음을 알 수 있습니다. 코드로 번역합시다.
.hover-4 {
배경 이미지 :
conic-gradient (/ * ??? */),
Conic-gradient (/ * ??? */);
배경 위치 :
0 0,
100% 0;
배경 크기 : 0% 200%;
배경 반복 : 비 반복;
전환 : 배경 크기 .4s, 배경 위치 0s;
}
.Hover-4 : 호버 {
배경 크기 : /* ??? */ 200%;
배경 위치 :
0 100%,
100% 100%;
}위치는 꽤 분명합니다. 한 그라디언트는 왼쪽 상단 (0 0)에서 시작하고 왼쪽 하단 (0 100%)에서 끝나고 다른 구배는 오른쪽 상단 (100% 0)에서 시작하여 오른쪽 하단 (100% 100%)에서 끝납니다.
우리는 배경 위치와 크기를 전환하여 공개합니다. 배경 크기의 경우에만 전환 값이 필요합니다. 이전과 마찬가지로 배경 위치는 즉시 변경되어야하므로 전환 지속 시간에 0S 값을 할당합니다.
크기의 경우 두 그라디언트는 모두 너비와 요소 높이의 두 배 (0% 200%)를 가지야합니다. 우리는 나중에 그들의 크기가 호버에서 어떻게 변하는 지 볼 것입니다. 먼저 그라디언트 구성을 정의하겠습니다.
아래 다이어그램은 각 구배의 구성을 보여줍니다.
두 번째 그라디언트 (녹색으로 표시됨)의 경우, 우리는 우리가 만들고있는 원뿔형 그레이드 내부에서 사용하는 높이를 알아야합니다. 이러한 이유로, 나는 요소의 높이를 설정하는 선 높이를 추가 한 다음 우리가 남긴 원뿔 구배 값에 대해 동일한 값을 시도 할 것입니다.
.hover-4 {
---C : #1095C1;
라인 높이 : 1.2em;
배경 이미지 :
conic-gradient (100% 50%의 -135deg, var (-c) 90deg, #0000 0),
conic-gradient (1.2em 50%의 -135deg, #0000 90deg, var (-c) 0);
배경 위치 :
0 0,
100% 0;
배경 크기 : 0% 200%;
배경 반복 : 비 반복;
전환 : 배경 크기 .4s, 배경 위치 0s;
}
.Hover-4 : 호버 {
배경 크기 : /* ??? */ 200%;
배경 위치 :
0 100%,
100% 100%;
}우리가 남긴 마지막 것은 배경의 크기를 파악하는 것입니다. 직관적으로, 우리는 각 그라디언트가 요소 너비의 절반을 차지해야한다고 생각할 수도 있지만 실제로는 충분하지 않습니다.
We get a gap equal to the height, so we actually need to do is increase the size of each gradient by half the height on hover for them to cover the whole element.
.Hover-4 : 호버 {
배경 크기 : calc (50% .6EM) 200%;
배경 위치 :
0 100%,
100% 100%;
}이전 예제처럼 최적화 한 후 얻은 것입니다.
.hover-4 {
---C : #1095C1;
라인 높이 : 1.2em;
배경:
conic-gradient (100% 50%의 -135deg, var (-c) 90deg, #0000 0)
0 var (-P, 0%) / var (-S, 0%) 200%No-Repeat,
conic-gradient (1.2em 50%의 -135deg, #0000 90deg, var (-C) 0)
100% var (-P, 0%) / var (-S, 0%) 200% No-Repeat;
전환 : .4S, 배경 위치 0s;
}
.Hover-4 : 호버 {
--p : 100%;
--s : calc (50% .6EM);
}
하나의 사용자 정의 속성 만있는 버전은 어떻습니까?
나는 당신을 위해 그것을 떠날 것입니다! 4 가지 유사한 호버 효과를 살펴본 후에는 최종 최적화를 단일 사용자 정의 속성으로 가져갈 수 있어야합니다. 의견 섹션에서 작업을 공유하십시오! 상이는 없지만 모든 사람에게 도움이되는 다른 구현과 아이디어로 끝날 수 있습니다!
우리가 끝나기 전에, 아나 튜더가 요리 한 마지막 호버 효과의 버전을 공유하겠습니다. 개선입니다! 그러나 알려진 버그로 인해 Firefox 지원이 부족합니다. 그럼에도 불구하고, 그라디언트를 블렌드 모드와 결합하여 쿨러 호버 효과를 만드는 방법을 보여주는 것은 좋은 아이디어입니다.
우리는 4 개의 슈퍼 쿨 호버 효과를 만들었습니다! 그리고 그것들은 다른 효과이지만, 모두 CSS 배경 속성, 사용자 정의 속성 및 calc ()를 사용하는 것과 동일한 접근 방식을 취합니다. 다른 조합으로 인해 우리는 깨끗하고 유지 관리 가능한 코드로 우리를 남겨 두는 동일한 기술을 사용하여 다른 버전을 만들 수있었습니다.
몇 가지 아이디어를 얻고 싶다면 500 (예, 500!) 호버 효과를 컬렉션했습니다. 그 중 400 개는 의사 요소없이 수행됩니다. 우리 가이 기사에서 다룬 4 개는 빙산의 일각 일뿐입니다!
위 내용은 배경 특성을 사용하는 냉각 호버 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
