CSS pur pour obtenir l'effet du signe plus '+' (exemple de code)

Cet article vous présentera, à travers des exemples de code, comment utiliser du CSS pur pour obtenir l'effet de signe plus "+". Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Obtenez l'effet de signe plus dans l'image ci-dessous :

Si vous souhaitez obtenir cet effet, vous n'avez besoin que d'un seul élément div.

Vous devez utiliser CSS pour les fonctionnalités avant, après et bordure.

Définissez d'abord une note div

<div class="add"></div>

puis définissez une bordure :

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

À ce stade, la bordure ressemble à ceci :

On peut utiliser la pseudo-classe before et sa border-top pour définir un "horizontal" :

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;

>

Notez que nous utilisons un positionnement absolu. À ce moment-là, cela devient comme ceci :

En vous référant à ce qui précède, nous pouvons utiliser la pseudo-classe after et la border-bottom pour définir une "verticale" :

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

après avoir ajouté Sur la pseudo-classe de survol, définissez la couleur lorsque la souris survole :

Le style final :

Quand la souris survole, il changera de couleur :

Des codes d'effets spéciaux CSS3, html5 et javascript plus sympas sont disponibles sur : collection d'effets spéciaux js

Pour plus de didacticiels connexes, veuillez visiter le Manuel de référence de la dernière version CSS3

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!