So verwenden Sie CSS, um einen Schiebeeffekt für Schaltflächentext zu erzielen

In diesem Artikel wird hauptsächlich die Verwendung von CSS vorgestellt, um den besonderen Effekt eines Schaltflächentexts zu realisieren. Jetzt kann ich ihn mit Ihnen teilen, indem ich den Quellcode herunterlade

Bitte vom Github-Download herunterladen.

https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects

Code-Interpretation

Dom definieren, den Text der Schaltfläche in einem Container definieren, einen Bereich für jeden Buchstaben, und jeder Bereich verfügt über ein Datentextattribut, dessen Wert mit dem Buchstaben im Bereich übereinstimmt:

<p class="box">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
</p>

Der Button wird zentriert:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Größe und Textstil des Buttons festlegen:

.box {
    width: 200px;
    height: 60px;
    border: 2px solid black;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    font-family: sans-serif;
}

Jeder Buchstabe des Buttons wird als Inline-Blockelement gesetzt, sodass die Animation individuell eingestellt werden kann:

.box span {
    display: inline-block;
    color: blue;
}

Versetzen Sie die Buchstaben außerhalb des Schaltflächencontainers. Die ungeraden Elemente werden oben und die geraden Elemente unten angezeigt:

.box span:nth-child(odd) {
    transform: translateY(-100%);
}

.box span:nth-child(even) {
    transform: translateY(100%);
}

Verwenden Sie Pseudoelemente, um eine Kopie hinzuzufügen jedes Buchstabens:

.box span::before {
    content: attr(data-text);
    position: absolute;
    color: red;
}

Lassen Sie die Pseudoelemente Die Buchstaben des Elements werden ebenfalls versetzt und relativ zu ihrem ursprünglichen Element positioniert:

.box span:nth-child(odd)::before {
    transform: translateY(100%);
}

.box span:nth-child(even)::before {
    transform: translateY(-100%);
}

Fügen Sie der Schaltfläche einen Mouseover-Stil hinzu und legen Sie fest Zeit zum Animieren verkürzen:

.box:hover span {
    transform: translateY(0);
}

.box span {
    transition: 0.5s;
}

Schließlich den Container ausblenden. Äußerer Inhalt:

.box {
    overflow: hidden;
}

Fertig!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS3 zur Realisierung vertikaler Textanordnung

Einführung in CSS zum Erstellen gestreifter Hintergrundstile für Webseiten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um einen Schiebeeffekt für Schaltflächentext zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!