회전하는 글로우 애니메이션으로 눈길을 끄는 버튼 효과 만들기

웹사이트에서 빛나고 회전하는 효과를 사용하여 눈길을 끄는 버튼을 어떻게 만드는지 궁금하신가요? 이러한 효과는 사용자를 사로잡고 웹 사이트의 UI/UX를 향상시킬 수 있습니다. CSS와 약간의 JavaScript를 사용하여 단계별로 구축하는 방법을 살펴보겠습니다.

1단계: 버튼 레이아웃 생성

먼저 간단한 버튼을 만들어 보겠습니다-

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

이렇게 됩니다-

2단계: 그라데이션 효과 추가

이제 원뿔형 그라디언트라고 불리는 특별한 종류의 그라디언트에 대해 이야기해 보겠습니다. 들어본 적 있나요? 선형 그라디언트는 직선을 따라 색상을 부드럽게 전환하고 방사형 그라디언트는 원의 중심에서 바깥쪽으로 색상을 혼합하는 반면, 원추형 그라디언트는 중심점을 중심으로 색상을 전환하여 원형 또는 원뿔 모양의 패턴을 형성합니다. 역동적이고 시각적으로 흥미로운 디자인을 만드는 독특한 방법입니다.

아래 차이점을 확인하세요-

이 효과에는 원뿔형 그라데이션을 사용하겠습니다. 버튼에 추가해 보겠습니다.

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

CSS 스니펫은 원뿔형 그라데이션을 포함하고 배경 크기 조정을 위해 테두리 상자를 사용합니다. 현재 진행 상황에 대한 분석은 다음과 같습니다.

원추형 기울기 분석

원추형 그라데이션(0부터, 투명, 흰색 10%, 투명 20%):

0부터: 그라데이션은 0도 각도(원의 상단)에서 시작하여 시계 방향으로 진행됩니다.

투명: 그라데이션은 완전히 투명한 색상으로 시작됩니다.

흰색 10%: 전체 그라데이션 원주의 10%에서 색상이 흰색으로 전환됩니다.

투명 20%: 그라데이션 원주의 20%에서 다시 투명하게 전환됩니다.

이 패턴은 투명도로 둘러싸인 흰색 "슬라이스"를 만듭니다.

테두리 상자

border-box: 요소의 콘텐츠, 패딩, 테두리가 포함된 영역에 그라데이션이 적용됩니다. 이는 그라데이션이 전체 요소의 상자를 테두리의 바깥쪽 가장자리까지 덮는다는 것을 의미합니다.

이 효과를 적용하면 버튼 모양이 이렇게 됩니다-

이제 이 원뿔형 그라데이션을 버튼의 그라데이션 테두리로 사용하겠습니다. 어떻게 그럴 수 있나요?

여기에서는 박스 크기 조정의 힘을 활용하겠습니다. 이 버튼에 대한 여러 배경을 만들겠습니다. 버튼의 상단 배경은 상자 크기 조정으로 패딩 상자를 갖는 단색 배경이 됩니다. 즉, 테두리까지 늘어나지 않습니다. 아래 코드를 참고하세요-

<button>WHY CHOOSE US</button>

이제 콘텐츠와 패딩을 포함하여 버튼을 덮는 검정색 배경이 생겼습니다. 이전에 추가한 원추형 그라데이션은 테두리까지 확장됩니다. 테두리가 투명하기 때문에 테두리를 통해 원추형 그라디언트의 2px 두께가 표시되는 것을 볼 수 있습니다. 자, 버튼은 이렇게 생겼습니다-

3단계: 그라데이션 애니메이션 적용

버튼에 빛나는 광선 효과를 추가했습니다! 이제 움직이게 만들어 보겠습니다. 이를 위해서는 약간의 JavaScript가 필요합니다. 하지만 먼저 CSS를 업데이트하여 더욱 유연하고 동적으로 만들겠습니다.

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

여기서 이전 섹션과 유일한 차이점은 --angle이라는 CSS 변수를 도입했다는 것입니다. [from var(--angle, 0)은 --angle 값이 정의되지 않은 경우 기본값이 0이 되어 이전과 동일하다는 의미입니다.] 이제 이 ---angle 값을 0에서 0으로 변경하겠습니다. 자바스크립트로 360. 결과적으로 원추형 그라데이션은 0도에서 360도까지 이동하여 빛나는 회전 효과를 만들어냅니다. 이제 JavaScript 부분을 살펴보겠습니다-

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

아주 간단한 조작. DOM 콘텐츠가 로드된 후 회전()이라는 함수를 호출합니다. 이 함수는 반복할 때마다 각도를 1씩 증가시키고 해당 값을 버튼의 CSS 변수 --angle로 설정합니다. 결국 원추형 그라데이션의 위치가 변경됩니다. requestAnimationFrame이라는 내장 함수를 사용하여 이 함수를 반복적으로 호출합니다. 이는 setInterval 또는 setTimeOut과 같은 특수 Javascript 함수입니다. requestAnimationFrame 함수에 대해 좀 더 자세히 살펴보겠습니다.

기능:
애니메이션을 부드럽게 유지: 애니메이션을 화면의 새로 고침 빈도(보통 초당 60프레임)와 동기화하여 애니메이션이 고르지 않게 보입니다.

전력 절약: 사용자가 다른 탭으로 전환하면 애니메이션을 일시 중지하여 리소스를 절약합니다.

완벽한 시간에 함수 호출: 업데이트할 시간이 되면 애니메이션 로직에 알려 모든 것이 동기화 상태를 유지합니다.

작동 방식:
requestAnimationFrame에 호출할 함수(일반적으로 애니메이션 로직)를 제공합니다. 브라우저가 화면에 다음 프레임을 그리기 직전에 이 기능을 실행합니다.

그리고 최종 결과가 나옵니다. 단계별 변경 사항은 아래 Codepen을 참조하세요.

이제 CSS와 JavaScript를 사용하여 빛나는 회전 버튼을 만들었습니다! 그라데이션, 애니메이션 속도를 자유롭게 조정하거나(어떻게 할 수 있는지 아시나요? 댓글에 남겨주세요.) 사용자 정의 효과를 추가할 수도 있습니다. 이러한 기술은 UI를 돋보이게 만드는 좋은 방법입니다.

창의적인 자바스크립트 애니메이션이나 CSS 버튼 효과에 대한 더 많은 아이디어를 원하시나요? 댓글로 알려주시고 다음 블로그 게시물도 기대해주세요!

여기서도 만나보실 수 있어요-

엑스
링크드인

위 내용은 회전하는 글로우 애니메이션으로 눈길을 끄는 버튼 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!