Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-07-10 15:59:36
Original
2761 Leute haben es durchsucht

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>
Nach dem Login kopieren

Der Button wird zentriert:

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

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;
}
Nach dem Login kopieren

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

.box span {
    display: inline-block;
    color: blue;
}
Nach dem Login kopieren

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%);
}
Nach dem Login kopieren

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

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

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%);
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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

.box {
    overflow: hidden;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage