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!
