Exemple détaillé d'effets spéciaux avec la souris sur un bouton basé sur une animation CSS3

Un bref tutoriel

Il s'agit d'un ensemble d'effets d'animation de bouton au survol de la souris réalisés à l'aide de l'animation CSS3. Cet ensemble d'animations de boutons au survol de la souris comporte 13 effets finaux, tous créés par des pseudo-éléments de boutons et une animation CSS3.

Voir la démo Téléchargez le plug-in

Comment l'utiliser it

Structure HTML

Cet effet utilise des hyperliens pour créer des boutons Par exemple, le code HTML. Le premier effet Swipe est ：

<a class="btn-0" href="#">Swipe</a>

CSSStyle

Pour plus de commodité, les effets spéciaux sont sauf , < Tous les éléments à l'exception de em>, , et ont des transitions animées ajoutées.

html *,
html *:before,
html *:after {
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
html i, html em,
html b, html strong,
html span {
  -webkit-transition: none;
  transition: none;
}

　 Ensuite, définissez un style commun pour le bouton.

a {
  text-decoration: none;
  line-height: 80px;
  color: black;
}
[class^="btn-"] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 80px;
  max-width: 250px;
  text-transform: uppercase;
  overflow: hidden;
  border: 1px solid currentColor;
}

Dans la première DEMO, utilisez le pseudo-élément :before du bouton pour créer un slider violet foncé. Le curseur est positionné de manière absolue et est situé à gauche du bouton. Sa largeur est de 0 au début

.btn-0 {
  color: #9a3789;
}
.btn-0:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: #520c46;
}

Lorsque la souris glisse sur le bouton, la couleur de la police de. le bouton passe au blanc, la largeur du pseudo-élément :before passe de 0 à 100 %.

.btn-0:hover {
  color: #e1c4dc;
}
.btn-0:hover:before {
  width: 250px;
}

Lorsque l'utilisateur clique sur le bouton, changez la couleur d'arrière-plan du bouton en violet plus clair.

.btn-0:active {
  background: #881474;
}

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!