Reines CSS, um den Effekt eines Pluszeichens zu erzielen (Codebeispiel)

In diesem Artikel geht es um die Wirkung des Hinzufügens eines Zeichens in reinem CSS (Codebeispiel). Ich hoffe, dass es für Sie hilfreich ist.

Erzielen Sie den Pluszeichen-Effekt im Bild unten:

Wenn Sie diesen Effekt erzielen möchten, benötigen Sie nur ein p Element.

Sie müssen CSS für Vorher-, Nachher- und Randfunktionen verwenden.

Legen Sie zuerst eine Div-Notiz fest

<div></div>

und dann einen Rand:

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

Zu diesem Zeitpunkt sieht der Rand so aus:

Wir können die Pseudoklasse before und ihren oberen Rand verwenden, um eine „Horizontale“ festzulegen:

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

Beachten Sie, dass wir absolute Positionierung verwenden. Zu diesem Zeitpunkt sieht es so aus:

Unter Bezugnahme auf das Obige können wir die After-Pseudoklasse und den Border-Bottom verwenden, um ein „ vertikal":

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

Fügen Sie die Hover-Pseudoklasse hinzu und legen Sie die Farbe des Mauszeigers fest:

Der endgültige Stil:

Wenn Sie mit der Maus darüber fahren, ändert sich die Farbe:

Das obige ist der detaillierte Inhalt vonReines CSS, um den Effekt eines Pluszeichens zu erzielen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!