Reines CSS, um den Pluszeichen-„+“-Effekt zu erzielen (Codebeispiel)

In diesem Artikel erfahren Sie anhand von Codebeispielen, wie Sie mit reinem CSS den Pluszeichen-„+“-Effekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Erzielen Sie den Pluszeichen-Effekt im Bild unten:

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

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

Legen Sie zuerst eine Div-Notiz fest

<div class="add"></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 border-top 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 Rand unten verwenden, um eine „Vertikale“ festzulegen:

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

Legen Sie nach dem Hinzufügen in der Hover-Pseudoklasse die Farbe fest, wenn die Maus nach oben schwebt:

Der endgültige Stil:

Wenn die Maus bewegt wird schwebt, es ändert die Farbe:

Mehr coole CSS3-, HTML5- und Javascript-Spezialeffektcodes, alles in: JS-Spezialeffektsammlung

Weitere verwandte Tutorials finden Sie im CSS3-Referenzhandbuch für die neueste Version

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