CSS로 빛나는 버튼 애니메이션 만들기

8018 단어 cssprogrammingwebdev
이 튜토리얼에서는 순수한 CSS를 사용하여 아름답게 빛나는 버튼을 만드는 방법을 배웁니다.

우리가 만들 것은 다음과 같습니다.



마크업



버튼의 HTML 마크업부터 시작하겠습니다.

<body>
  <button class="button">Hover Me</button>
</body>


충분히 간단합니다. 수업 버튼이 있는 버튼이 있습니다. 우리는 CSS를 사용하여 나머지 마법을 수행할 것입니다.

스타일링



이 단계는 완전히 선택 사항입니다. 그러나 우리는 body 요소에 최소 높이 100vh를 추가하고 버튼을 더 잘 볼 수 있도록 CSS 그리드를 사용하여 콘텐츠를 수직 및 수평으로 화면 중앙에 배치합니다.

body {
  height: 100vh;
  background: #000;
  display: grid;
  place-items: center;
}


다음으로 버튼 스타일 지정을 시작합니다.

여기에 멋진 것은 없습니다. 버튼에 몇 가지 기본 스타일을 추가했습니다. 우리는 border-radius: 50px; 버튼 모서리가 둥글게 됩니다. 또한 position:relative;를 추가했습니다. 버튼 글로우 효과를 버튼에 절대적으로 배치할 수 있습니다.

.button {
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #000;
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}


버튼에 빛나는 효과를 추가하기 위해 버튼에 :before 가상 요소를 사용할 것입니다. 따라서 버튼에 절대적으로 배치합니다. 또한 각 면에 -5px를 추가하여 글로우 효과가 각 면의 버튼 외부에서 5px가 되도록 합니다.

여기서 주목해야 할 가장 중요한 사항은 filter: blur(20px);를 추가했다는 것입니다. 글로우에 20px의 흐림 효과를 주기 위해 opacity: 0을 지정했습니다. 글로우 효과는 기본적으로 숨겨집니다. 또한 transition: opacity 0.5s를 추가했습니다. 글로우 효과가 부드럽게 나타나고 사라지도록 합니다.

배경: 상속; 가리키면 단추에서 그라데이션 배경색을 상속하는 데 사용됩니다.

.button:before {
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}


이제 재미있는 부분을 위해 :hover 의사 선택기를 사용하여 사용자가 버튼 위로 마우스를 가져갈 때 버튼에 스타일을 추가합니다.

여기에서는 90도 방향의 4가지 색상으로 버튼 배경으로 선형 그래디언트를 추가했습니다. 우리는 background-size: 400%; 애니메이션이 진행 중일 때 각 그라데이션 색상이 버튼 배경의 100% 너비를 차지하도록 합니다. 또한 z-index: 1; 버튼 텍스트가 글로우 효과 위에 오도록 합니다. 마지막으로 애니메이션을 추가했습니다. 글로우 8s 선형 무한; 버튼을 가리키면 무한히 빛나는 효과를 줍니다. 다음 단계에서 애니메이션 글로우를 정의합니다.

마찬가지로 opacity: 1; 및 z-지수: -1; 버튼을 가리키고 있을 때 버튼의 :before 의사 요소로. 이렇게 하면 글로우가 표시되고 버튼을 가리키면 글로우 위에 버튼 텍스트가 표시됩니다.

.button:hover {
  background: linear-gradient(90deg, #03a9fa, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}
.button:hover:before {
  opacity: 1;
  z-index: -1;
}


마지막으로 글로우 키프레임 애니메이션을 추가합니다.

여기에서 우리는 background-position: 0%; 애니메이션 및 배경 위치의 0%에서: 400%; 100%에서 버튼의 배경 위치를 점차적으로 변경합니다. 이전 단계에서 정의한 애니메이션의 8초 지속 시간과 결합하면 버튼 배경 위치가 부드럽게 변경되고 각 그라데이션 색상이 측면에서 나타나고 사라지게 됩니다.

@keyframes glow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}


그게 다야, 몇 가지 간단한 단계로 빛나는 버튼을 만들었습니다. 색상, 배경 크기 및 애니메이션의 지속 시간을 가지고 놀면서 다른 결과를 얻을 수 있습니다.

Codepen에서 이 자습서의 소스 코드를 찾을 수 있습니다.
코스모스 블록체인에 프런트엔드를 연결하는 방법
VS Code 타임라인은 Git이 할 수 없는 손실된 작업을 복원합니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage