Animation CSS : comment obtenir l'effet flash des éléments

Animation CSS : Comment obtenir l'effet flash des éléments, des exemples de code spécifiques sont nécessaires

Dans la conception Web, les effets d'animation peuvent parfois apporter une bonne expérience utilisateur à la page. L'effet scintillant est un effet d'animation courant qui peut rendre les éléments plus accrocheurs. Ce qui suit explique comment utiliser CSS pour obtenir l'effet flash des éléments.

1. Implémentation de base de flash

Tout d'abord, nous devons utiliser la propriété d'animation de CSS pour obtenir l'effet flash. La valeur de la propriété animation doit spécifier le nom de l'animation, le temps d'exécution de l'animation, le temps de retard de l'animation, la méthode d'exécution de l'animation et les temps d'exécution de l'animation. Pour l'effet flash, nous pouvons le spécifier comme une animation en boucle infinie.

Ensuite, nous devons attribuer des styles aux éléments. Étant donné que l'effet de paillettes nécessite de changer la couleur de l'élément lui-même, nous pouvons utiliser la propriété CSS currentColor pour obtenir la couleur actuelle du texte de l'élément comme couleur des paillettes. Nous pouvons également séparer le style de l'élément de l'effet flash via le sélecteur, afin que le style de contrôle et l'animation puissent être séparés.

Voici un exemple de code simple :

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 1rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
  opacity: 0;
}

Dans le code de style ci-dessus, nous avons défini une classe nommée .shine pour styliser l'élément. Lors de la définition de l'animation, nous utilisons la règle @keyframes pour définir une animation nommée brillant et définissons 3 images clés pour obtenir l'effet clignotant.

Ensuite, nous avons ajouté un calque transparent positionné de manière absolue à l'élément en utilisant la pseudo-classe ::before, et appliqué l'animation de l'effet scintillant sur ce calque.

2. Considérations de compatibilité

Bien que le code ci-dessus puisse obtenir l'effet flash, il n'est pas compatible avec tous les navigateurs. Selon caniuse.com, la propriété box-shadow et la propriété currentColor présentent des problèmes de compatibilité.

Pour résoudre ce problème, nous pouvons apporter quelques modifications au code ci-dessus. Tout d’abord, nous pouvons remplacer la propriété box-shadow par une image d’arrière-plan transparente. Deuxièmement, nous pouvons utiliser la fonction rgba() de CSS pour contrôler la couleur et la transparence du flash.

Voici l'exemple de code modifié :

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Dans le code modifié ci-dessus, nous avons utilisé l'attribut background-color et l'attribut opacity au lieu de l'attribut box-shadow. Lors de la définition de l'animation flash, nous utilisons la fonction rgba() pour définir la couleur et la transparence. De cette façon, nous pouvons implémenter l’effet scintillant dans tous les navigateurs modernes.

3. Autres optimisations

Ensuite, nous pouvons apporter quelques optimisations au code. Par exemple, nous pouvons désactiver l'exécution d'effets d'animation lors du premier chargement de la page pour améliorer les performances de la page Web. Nous pouvons également utiliser la propriété CSS will-change pour accélérer les performances de rendu lors de la lecture de l'animation.

Voici un exemple de code optimisé :

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 优化样式 */
.shine::before {
  will-change: opacity, background-color;
}

/* 禁用闪光动画在载入时立即执行 */
.shine:not(:hover)::before {
  animation-play-state: paused;
}

/* 开启闪光动画 */
.shine:hover::before {
  animation-play-state: running;
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Dans le code modifié ci-dessus, nous utilisons la propriété will-change de CSS pour demander au navigateur d'optimiser le rendu de l'élément. Afin d'éviter que les effets d'animation ne soient exécutés immédiatement lors du chargement de la page, nous utilisons l'attribut animation-play-state pour définir l'état de pause initial. Enfin, lorsque la souris survole l'élément, nous utilisons la pseudo-classe :hover pour activer l'animation flash et définir la valeur de l'attribut d'animation sur brillant.

Résumé

Grâce à l'exemple de code ci-dessus, nous pouvons voir comment utiliser CSS pour obtenir l'effet flash des éléments. Cet effet peut apporter une bonne expérience utilisateur à la conception Web. Pour obtenir cet effet, nous devons prêter attention à la compatibilité et aux performances du code. Si vous rencontrez des problèmes lors de la pratique, vous pouvez essayer d'optimiser le code et essayer d'autres solutions.

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!