Maison  >  Article  >  interface Web  >  CSS pur pour obtenir l'effet d'un signe plus (exemple de code)

CSS pur pour obtenir l'effet d'un signe plus (exemple de code)

不言
不言avant
2018-11-16 16:30:045272parcourir

Ce que cet article vous apporte concerne l'effet de l'ajout d'un signe en CSS pur (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

CSS pur pour obtenir leffet dun signe plus (exemple de code)

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

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

Définissez d'abord une note div

<div></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 :

CSS pur pour obtenir leffet dun signe plus (exemple de code)

On peut utiliser la pseudo-classe avant et sa bordure-haut 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 le positionnement absolu . À ce moment-là, cela devient comme ceci :

CSS pur pour obtenir leffet dun signe plus (exemple de code)

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

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

Ajoutez la pseudo-classe de survol et définissez la couleur du survol de la souris :

Le style final :

CSS pur pour obtenir leffet dun signe plus (exemple de code)

Au survol de la souris, elle changera de couleur :

CSS pur pour obtenir leffet dun signe plus (exemple de code)

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer