Créez un effet de bouton accrocheur avec une animation lumineuse rotative

Vous êtes-vous déjà demandé comment les sites Web créent ces boutons accrocheurs avec des effets lumineux et rotatifs ? Ces effets peuvent captiver les utilisateurs et améliorer l'UI/UX de votre site Web. Explorons comment les construire étape par étape avec CSS et un peu de JavaScript.

Étape 1 : Créer la disposition des boutons

Faisons d'abord un simple bouton-

<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 ... */

Ça ressemblera à ça-

Étape 2 : Ajout d'un effet de dégradé

Parlons maintenant d’un type spécial de dégradé appelé dégradé conique. En avez-vous entendu parler ? Alors que les dégradés linéaires font passer les couleurs en douceur le long d'une ligne droite et que les dégradés radiaux mélangent les couleurs vers l'extérieur à partir du centre d'un cercle, les dégradés coniques font la transition des couleurs autour d'un point central, formant un motif circulaire ou en forme de cône. C'est une façon unique de créer des designs dynamiques et visuellement intéressants.

Voir la différence ci-dessous-

Nous utiliserons le dégradé conique pour cet effet. Ajoutons cela à notre bouton-

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

L'extrait CSS implique un dégradé conique et utilise une bordure pour le dimensionnement de l'arrière-plan. Voici un aperçu de ce qui se passe :

Répartition du dégradé conique

dégradé conique(de 0, transparent, blanc 10%, transparent 20%) :

à partir de 0 : Le dégradé commence à un angle de 0 degré (le haut du cercle) et se poursuit dans le sens des aiguilles d'une montre.

transparent : Le dégradé commence par une couleur entièrement transparente.

blanc 10 % : À 10 % de la circonférence totale du dégradé, la couleur passe au blanc.

transparent 20 % : À 20 % de la circonférence du dégradé, il redevient transparent.

Ce motif crée une "tranche" de blanc entourée de transparence.

border-box

border-box : Le dégradé s'applique à la zone qui comprend le contenu, le remplissage et la bordure de l'élément. Cela signifie que le dégradé couvrira toute la zone de l'élément, jusqu'au bord extérieur de la bordure.

Après avoir appliqué cet effet, le bouton ressemblera à ceci-

Maintenant, nous allons utiliser ce dégradé conique comme bordure dégradée du bouton. Comment pouvons-nous faire cela ?

Nous utiliserons ici la puissance du dimensionnement des boîtes. Nous allons créer plusieurs arrière-plans pour ce bouton. L’arrière-plan supérieur du bouton sera un arrière-plan uni qui aura une boîte de remplissage comme dimensionnement de la boîte, ce qui signifie qu’il ne s’étirera pas jusqu’à la bordure. Voir le code ci-dessous-

<button>WHY CHOOSE US</button>

Nous avons donc maintenant un fond noir qui recouvre le bouton, y compris son contenu et son remplissage. Le dégradé conique que nous avons ajouté précédemment s'étend jusqu'à la frontière. Puisque la bordure est transparente, nous pouvons voir l'épaisseur de 2 pixels du dégradé conique à travers la bordure. Maintenant, le bouton ressemble à ceci-

Étape 3 : Animer le dégradé

Nous avons ajouté cet effet brillant à notre bouton ! Maintenant, faisons bouger les choses. Pour ce faire, nous aurons besoin d’un peu de JavaScript. Mais d’abord, nous allons mettre à jour le CSS pour le rendre plus flexible et dynamique.

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

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

Ici, la seule différence par rapport à la section précédente est que nous avons introduit une variable CSS appelée --angle. [from var(--angle, 0) signifie que si la valeur --angle n'est pas définie, la valeur par défaut sera 0, ce qui était la même qu'avant.] Et maintenant, nous allons changer cette valeur ---angle de 0 à 360 par Javascript. En conséquence, le dégradé conique se déplacera de 0 à 360 degrés et produira cet effet de rotation brillant. Voyons maintenant la partie JavaScript-

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

Opération très simple. Une fois le contenu du DOM chargé, nous appelons une fonction appelée rotate(). Cette fonction incrémente l'angle de 1 à chaque itération et définit cette valeur sur la variable CSS du bouton --angle. Cela change finalement la place du dégradé conique. Nous appelons cette fonction de manière itérative en utilisant une fonction intégrée appelée requestAnimationFrame. Il s'agit d'une fonction Javascript spéciale comme setInterval ou setTimeOut. Entrons un peu en détail dans cette fonction requestAnimationFrame -

Ce qu'il fait :
Garde la fluidité des animations :Il synchronise vos animations avec le taux de rafraîchissement de l'écran (généralement 60 images par seconde) afin qu'elles ne paraissent pas saccadées.

Économise de l'énergie : Il met en pause les animations lorsque l'utilisateur passe à un autre onglet, économisant ainsi des ressources.

Appelle votre fonction au moment idéal : Il indique à votre logique d'animation quand il est temps de mettre à jour, afin que tout reste synchronisé.

Comment ça marche :
Vous donnez à requestAnimationFrame une fonction à appeler (généralement votre logique d'animation). Il exécute cette fonction juste avant que le navigateur ne dessine l'image suivante à l'écran.

Et, nous obtenons le résultat final. Consultez le Codepen ci-dessous pour obtenir des modifications étape par étape -

Vous avez maintenant créé un bouton lumineux et rotatif en utilisant CSS et JavaScript ! N'hésitez pas à modifier les dégradés, la vitesse d'animation (une idée de comment nous pouvons faire cela ? Laissez-le dans le commentaire.), ou même à ajouter vos propres effets personnalisés. Ces techniques sont un excellent moyen de faire ressortir votre interface utilisateur.

Vous voulez plus d’idées d’animations Javascript créatives ou d’effets de boutons CSS ? Faites-le-moi savoir dans les commentaires et restez à l'écoute pour le prochain article du blog !

Vous pouvez également me retrouver ici-

X
LinkedIn

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!