Créez une carte fantaisie avec une bordure dégradée animée

Dans ce didacticiel, je vais vous guider dans la création d'un effet de bordure dégradé animé à l'aide de propriétés personnalisées CSS, qui peuvent ajouter un aspect dynamique et accrocheur à vos composants d'interface utilisateur. À la fin, vous aurez une carte simple avec une bordure dégradée animée, en utilisant le CSS personnalisé @property.

Si vous n'êtes pas familier avec @property personnalisé CSS, lisez d'abord ce blog.

Structure de base de la carte

Nous utiliserons React pour ce tutoriel, la carte de base ressemblera à ceci

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;

Ajouter des styles de base à la carte

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

Créer une bordure simple

Avant de créer une bordure animée en dégradé, voyons comment créer une bordure simple. Nous n'utiliserons pas la propriété CSS border mais utiliserons plutôt des pseudo éléments ::before et ::after pour la carte. Une autre propriété importante ici est l'encart qui nous permet de placer les pseudo éléments à l'intérieur de la carte. Le z-index sera -1 car nous voulons que la bordure soit en dessous du contenu de la carte.

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

Notre carte ressemble désormais à ceci

Ajout d'une propriété personnalisée --angle

Nous ajouterons une propriété personnalisée pour suivre l'angle du dégradé. Nous utiliserons le dégradé conique.
Ajoutez une propriété personnalisée comme celle-ci

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

et apportez les modifications suivantes au CSS

• Remplacez l'arrière-plan par background-image pour afficher le dégradé.
• Ajoutez une rotation d'animation pour l'angle de la propriété personnalisée.
• Le dégradé conique a l'angle comme premier argument et nous allons le modifier afin de l'animer.
• Ajoutez du flou et de l'opacité pour un effet éclatant.

Votre CSS devrait ressembler à ceci

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

Et enfin nous avons une carte avec une bordure dégradée animée.

Démo

Cliquez ici

En savoir plus

• Documents MDN @property

Message original

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!