So verwenden Sie CSS, um einen Textlöscheffekt zu erzielen

Beim Webdesign benötigen wir möglicherweise einige Spezialeffekte, um die Schönheit und das Interesse der Seite zu steigern. Beispielsweise benötigen wir möglicherweise einige Texteffekte, um wichtige Informationen hervorzuheben oder bestimmte Inhalte hervorzuheben. Eine davon ist die Textdurchstreichung, bei der ein Teil des Textes durchgestrichen wird, um anzuzeigen, dass er nicht mehr gültig oder relevant ist. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS einen Textlöscheffekt erzielen.

1. text-decoration: durchgestrichen;

Um den Textlöscheffekt zu erzielen, können wir das Attribut text-decoration verwenden und den Wert auf durchgestrichen festlegen. Diese Eigenschaft wird normalerweise zum Unterstreichen von Text verwendet, kann aber auch zum Festlegen von Textentfernungseffekten verwendet werden. Hier ist ein Beispielcode:

<p class="delete">这是一段被删除的文本。</p>

.delete {
  text-decoration: line-through;
}

In diesem Beispiel fügen wir eine Klasse mit dem Namen „delete“ zum p-Element hinzu und setzen ihren text-decoration-Attributwert auf „line-through“. Das bedeutet, dass in diesem Text Wörter durchgestrichen sind, um anzuzeigen, dass sie gelöscht wurden. Dies ist die einfachste und einfachste Möglichkeit, den Textlöscheffekt zu erzielen.

2. Passen Sie die Farbe, den Stil und die Stärke der Durchstreichung an.

Im Stil können wir die Farbe, den Stil und die Stärke der Durchstreichung weiter anpassen. Häufig verwendete Attribute sind Textdekorationsfarbe, Textdekorationsstil und Textdekorationsdicke. Hier ist ein Beispielcode:

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

In diesem Beispiel fügen wir auch eine Klasse namens „delete“ zum p-Element hinzu, aber dieses Mal verwenden wir die zusätzlichen Attribute des Textstils. Wir setzen die Durchstreichungsfarbe auf Rot, den Stil auf Gepunktet und die Dicke auf 2 Pixel. Auf diese Weise können wir den Textentfernungsstil nach Bedarf personalisieren, um ihn an die spezifischen Anforderungen unserer Webseiten anzupassen.

3. Verwenden Sie Pseudoelemente::before und ::after

Zusätzlich zur Verwendung des Textdekorationsattributs können wir auch Pseudoelemente::before und ::after verwenden, um Textlöscheffekte zu erzielen. Hier ist der Beispielcode:

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

In diesem Beispiel verwenden wir die Pseudoelemente ::before und ::after, um eine Durchstreichung zu erstellen. Das Inhaltsattribut dieser Elemente ist auf „leer“ und ihre Position auf „absolut“ festgelegt, sodass sie den Text überlappen können. Wir haben diesen Elementen eine Randlinie hinzugefügt und sie dann um 45 Grad gedreht, um eine durchgestrichene Form zu erzeugen.

Zusammenfassung

Beim Entwerfen von Webseiten ist der Textlöscheffekt ein sehr nützlicher Effekt, der dabei helfen kann, passende Szenen und Dialoge darzustellen. In diesem Artikel haben wir drei Möglichkeiten vorgestellt, um einen Textlöscheffekt zu erzielen: Textdekorationsattribute, benutzerdefinierte Stile und die Verwendung von Pseudoelementen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Flexibilität und den Spaß an Ihrem Webdesign zu steigern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um einen Textlöscheffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!