Beispielcode zur Umsetzung des „Pluszeichen“-Effektes mit CSS

So erzielen Sie den unten gezeigten Pluszeichen-Effekt:

Um diesen Effekt zu erzielen, benötigen Sie nur ein Div-Element.

CSS wird für die Eigenschaften „vorher“, „nachher“ und „Rahmen“ benötigt.

Legen Sie zunächst eine Div-Notiz fest

 <div Klasse="Hinzufügen"></div>

Einen weiteren Rand setzen:

.hinzufügen {
  Rand: 1px durchgezogen;
  Breite: 100px;
  Höhe: 100px;
  Farbe: #ccc;
  Übergang: Farbe .25s;
  Position: relativ;
}

Der Rand sieht nun so aus:

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

.add::before{
  Inhalt: '';
  Position: absolut;
  links: 50%;
  oben: 50 %;
  Breite: 80px;
  Rand links: -40px;
  Rand oben: -5px;
  Rahmen oben: 10px durchgezogen;
}

Beachten Sie, dass wir die absolute Positionierung verwendet haben. Jetzt wird es so:

In Bezug auf das Obige können wir die Pseudoklasse „after“ und „border-bottom“ verwenden, um eine „vertikale“ Einstellung vorzunehmen:

.add::nach {
 Inhalt: '';
 Position: absolut;
 links: 50%;
 oben: 50 %;
 Höhe: 80px;
 Rand links: -5px;
 Rand oben: -40px;
 Rahmen links: 10px durchgezogen;
}

Fügen Sie die Pseudoklasse „Hover“ hinzu und legen Sie die Farbe fest, die beim Schweben der Maus entsteht:

.add:hover {
  Farbe: blau;
}

Der endgültige Stil:

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

Den Effekt könnt ihr hier sehen:

https://jsbin.com/quvidap/edit?html,css,output

Zusammenfassen

Oben sehen Sie den Beispielcode, wie Sie mit CSS den „Pluszeichen“-Effekt erzielen. Ich hoffe, er ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!