멋진 이미지 장식 : 마스크 및 고급 호버 효과

이것은

요소와 CSS 만 사용하여 시각적으로 멋진 이미지 장식을 제작하는 3 부 시리즈의 2 부입니다. 파트 1을 바탕으로, 우리는 더 복잡한 효과를 달성하고 호버 애니메이션을 달성하기 위해 계속 그라디언트를 탐색하고

속성을 ​​소개합니다. 멋진 이미지 장식 시리즈 개요 <img alt="멋진 이미지 장식 : 마스크 및 고급 호버 효과" > 단일 요소 매직 마스크 및 고급 호버 효과 (여기 있습니다!) 윤곽선 및 복잡한 애니메이션 mask 첫 번째 예를 들어 봅시다 : 우표 효과 놀랍게도이 효과는 두 개의 그라디언트와 필터 만 필요합니다.

패딩은 백그라운드 그라디언트를위한 공간을 만듭니다.

와

의 조합은 이미지 주위의 원형 섹션을 영리하게 절단합니다.

값은 이미지 크기에 관계없이 완벽한 정렬을 보장합니다. 둥근 프레임
• 이 예제는 a
를 사용하여 이미지 주위의 원을 생성하여 일관된 크기를 위해
• 값을 사용합니다. 프레임과 이미지 사이의 투명한 간격은
속성을 ​​사용하여 달성됩니다.
는 와 를 결합하여 이미지와 프레임을 드러내고 그들 사이의 간격을 가리 킵니다. 내부 투명 경계 이 기술은 내부 섹션의 경우 a

를 사용하고 외부의 경우 a

를 사용하여 투명한 경계

내부 내부를 생성하며, 간격은 투명 효과를 만듭니다.

.

다중 그라디언트 구문은 유사한 결과를 얻을 수 있습니다. 최선의 접근법은 간결함과 유지 가능성을 우선시합니다 호버 효과는 트릭을 사용하여 추가되어 비정상적이지 않은

특성을 애니메이션합니다. 프레임 공개 애니메이션

이 섹션은 이전 예제를 바탕으로 속성에서 속성으로 속성으로 이동하고 테두리에 a

img {
  --r: 10px; /* Circle radius */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

를 추가합니다. 호버 효과는 또는

를 조정하여 달성됩니다. 추가 예제는 더 복잡한 다중 단계 애니메이션을 보여 주어 독자가 그라디언트 및 마스크 상호 작용을 분석하고 이해하도록 도전합니다. radial-gradient() 결론 이 시리즈 의이 부분은 단일 linear-gradient() 요소를 사용하여 정교한 이미지 장식 및 애니메이션을 만들기위한 그라디언트의 힘과 round 속성을 ​​보여줍니다. 파트 3은 윤곽선과 더 복잡한 애니메이션을 탐구합니다. 이미지 효과가 깨진 보너스 데모가 제공됩니다.

멋진 이미지 장식 시리즈 개요

단일 요소 매직 마스크 및 고급 호버 효과 (여기 있습니다!) 윤곽선 및 복잡한 애니메이션

위 내용은 멋진 이미지 장식 : 마스크 및 고급 호버 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!