애니메이션 그라데이션 테두리로 멋진 카드 만들기-CSS 튜토리얼-php.cn

애니메이션 그라데이션 테두리로 멋진 카드 만들기

Patricia Arquette

풀어 주다： 2024-10-21 14:42:02

원래의

1001명이 탐색했습니다.

이 튜토리얼에서는 UI 구성 요소에 역동적이고 시선을 사로잡는 모양을 추가할 수 있는 CSS 사용자 정의 속성을 사용하여 애니메이션 그라데이션 테두리 효과를 만드는 방법을 안내하겠습니다. 마지막에는 CSS 사용자 정의 @property를 사용하여 애니메이션 그라데이션 테두리가 있는 간단한 카드를 갖게 됩니다.

CSS Custom @property에 익숙하지 않다면 먼저 이 블로그를 읽어보세요.

기본 카드 구조

이 튜토리얼에서는 React를 사용할 것이며 기본 카드는 다음과 같습니다

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

로그인 후 복사

카드에 기본 스타일 추가하기

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

로그인 후 복사

간단한 테두리 만들기

그라디언트 애니메이션 테두리를 만들기 전에 간단한 테두리를 만드는 방법을 살펴보겠습니다. CSS 테두리 속성을 사용하지 않고 대신 카드에 의사 요소 ::before 및 ::after를 사용합니다. 여기서 또 다른 중요한 속성은 카드 내부에 의사 요소를 배치할 수 있는 삽입입니다. 테두리가 카드 콘텐츠 아래에 있기를 원하므로 Z-색인은 -1이 됩니다.

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

로그인 후 복사

이제 우리 카드는 이렇게 생겼습니다

Create fancy card with animated gradient border

사용자 정의 속성 추가 --angle

그라디언트 각도를 추적하기 위해 사용자 정의 속성을 추가하겠습니다. 원추형 그라데이션을 사용하겠습니다.
이와 같은 사용자 정의 속성을 추가하세요

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

로그인 후 복사

CSS를 다음과 같이 변경합니다

그라디언트를 표시하려면 배경을 배경 이미지로 교체하세요.
사용자 정의 속성 각도에 애니메이션 스핀을 추가합니다.
원추형 그라데이션에는 첫 번째 인수로 각도가 있으며 애니메이션을 적용하기 위해 각도를 변경할 예정입니다.
빛나는 효과를 위해 흐림 효과와 불투명도를 추가하세요.

CSS는 다음과 같아야 합니다

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

로그인 후 복사

마지막으로 애니메이션 그라데이션 테두리가 있는 카드가 생겼습니다.