アニメーション化されたグラデーションの境界線を備えた派手なカードを作成します-CSSチュートリアル-php.cn

アニメーション化されたグラデーションの境界線を備えた派手なカードを作成します

Patricia Arquette

リリース： 2024-10-21 14:42:02

オリジナル

1001 人が閲覧しました

このチュートリアルでは、CSS カスタムプロパティを使用して、アニメーション化されたグラデーション境界線効果を作成する手順を説明します。これにより、UI コンポーネントに動的で人目を引く外観を追加できます。最後には、CSS カスタム @property を使用して、アニメーション化されたグラデーションの境界線を持つシンプルなカードが完成します。

CSS カスタム @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 border プロパティは使用せず、代わりにカードの疑似要素 ::before と ::after を使用します。ここでのもう 1 つの重要なプロパティは、カード内に疑似要素を配置できるようにする inset です。境界線をカードのコンテンツの下に置く必要があるため、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 の追加

グラデーションの角度を追跡するカスタムプロパティを追加します。 conic-gradient を使用します。
次のようなカスタムプロパティを追加します

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

ログイン後にコピー

CSS に次の変更を加えます

グラデーションを表示するには、背景をbackground-imageに置き換えます。
カスタムプロパティ角度のアニメーションスピンを追加します。
円錐グラデーションには最初の引数として角度があり、アニメーション化するためにそれを変更します。
ぼかしと不透明度を追加して、輝く効果を与えます。

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;
  }
}

ログイン後にコピー

そして最後に、アニメーション化されたグラデーションの境界線を持つカードが完成しました。