So verschönern Sie Zeichen mit CSS3

CSS ist nicht nur eine Technologie, sondern auch eine Kunst. Wenn Sie es gut nutzen, können Sie mit der Weiterentwicklung der modernen Browsertechnologie, der Innovation von CSS3, verschiedene magische Effekte erzielen. und gibt Programmierern außerdem mehr Raum und Möglichkeiten, ihre eigenen Launen auszuleben. So verschönern Sie ein halbes Zeichen mit CSS. Tatsächlich geht es darum, einen Charakter in zwei Hälften zu teilen, eine Hälfte ist im A-Stil und die andere Hälfte ist im B-Stil. Natürlich weiß jeder, dass ein einzelnes Zeichen nicht getrennt werden kann, egal ob es sich um ein chinesisches oder ein westliches Schriftzeichen handelt. Wenn es darum geht, ein halbes Wort oder einen halben Satz zu verschönern, weiß wohl jeder, wie es zu tun. Auch sehr häufig. Aber wie verschönert man einen halben Charakter? Natürlich gibt es einen Weg, was hier gebraucht wird, ist Kunst.

Erster Blick auf die erforderlichen Renderings:

Die linke Seite ist eine Farbe, die rechte Seite ist eine Farbe. Wenn Sie Bilder verwenden, ist das natürlich sehr einfach, aber Bilder haben Einschränkungen, wie zum Beispiel die Unfähigkeit, Zeichenstile dynamisch zu generieren. Schauen wir uns an, wie Sie diesen Effekt mit reinem CSS erzielen können.

Die Grundidee, ein halbes Zeichen mit CSS zu verschönern

Die Idee ist sehr einfach: Schreiben Sie einfach ein Wort zweimal und zeigen Sie jeweils die Hälfte davon an. Die Idee ist sehr klar und einfach, aber wie setzt man sie um? Natürlich kann man ein Wort nicht zweimal schreiben. Das ist zu dumm, und wenn der Benutzer diesen Text kopiert und einfügt, werden zwei Kopien desselben Textes eingefügt. Hier müssen Sie CSS-Pseudoelemente verwenden: before und :after. Denken Sie an das Wort „Pseudo“ in diesem „Pseudoelement“, das darauf hinweist, dass es ursprünglich nicht existiert. Unsere Methode besteht darin, dasselbe Zeichen in das Pseudoelement einzufügen, nur die Hälfte davon anzuzeigen und die andere Hälfte des ursprünglichen Zeichens anzuzeigen und sie schließlich zu einem Wort zu kombinieren.

CSS-Code

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}

HTML-Code

<p>单个字符</p>
<span class="halfStyle lazy " data-content="风">风</span>
<span class="halfStyle lazy " data-content="流">流</span>
<span class="halfStyle lazy " data-content="倜">倜</span>
<span class="halfStyle lazy " data-content="傥">傥</span>

<hr/>
<p>用脚本自动美化：</p>

<span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span>

Sie müssen lediglich die .halfStyleCSS-Klasse auf jedes Zeichen anwenden, das halb verschönert werden muss. Im obigen Codebeispiel enthält jeder Span ein Zeichen, wir platzieren das Datenattribut darauf, z. B. data-content="wind", und verwenden dann die Methode attr(data-content) im Pseudoelement, also dass .halfStyle:before dynamisch wird, ohne dass Sie den Inhalt manuell fest codieren müssen.

Für Situationen, in denen mehrere Zeichen verschönert werden müssen, können wir einen jQuery-Code erstellen, um diesen Effekt automatisch allen Zeichen mit der .textToHalfStyleCSS-Klasse hinzuzufügen:

jQuery(function($) {
    var text, chars, $el, i, output;

    // 遍历所有字符
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('
        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">&#39; 
        + text + &#39;</span>&#39;
        );

        // Reset output for appending
        output = &#39;&#39;;

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += &#39;<span aria-hidden="true" data-content="&#39; + chars[i] + &#39;">&#39; + chars[i] + &#39;</span>&#39;;
        }

        // Write to DOM only once
        $el.append(output);
    });
});

Auf diese Weise, ob Es handelt sich um einen Textabsatz oder den gesamten Artikel. Wir können den Text auf einmal erstellen. Wir müssen ihn nicht einzeln manuell einrichten und wir müssen keine Bilder einzeln erstellen.

Fortgeschrittener Ansatz: Sowohl die linke als auch die rechte Hälfte der Zeichen werden mithilfe von Pseudoelementen generiert.

In unserem obigen Ansatz wird die linke Hälfte des Textes mithilfe des Pseudoelements „:before“ generiert Die rechte Hälfte verwendet das ursprüngliche Wort. Tatsächlich können wir jedoch Pseudoelemente verwenden, um sowohl die linke als auch die rechte Seite zu generieren – die rechte Hälfte wird mit :after implementiert.

CSS-Code

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

Sie werden feststellen, dass unsere Implementierungsmethode sehr flexibel sein kann. Jetzt können wir jedes Wort 1/3 belegen Holen Sie sich ein dreifarbiges Wort. Die obigen Beispiele verwenden alle eine linke und rechte Farbtrennung. Tatsächlich können wir auch eine obere und untere Farbtrennung oder eine obere, mittlere und untere Farbtrennung vornehmen.

Das Gleiche gilt für Webprogrammierer. Nur wir sind es gewohnt, zu erforschen und zu innovieren. Es gibt viele Aufgaben, die wir auf einfachere und bequemere Weise erledigen können. Geht es dir genauso?

Das obige ist der detaillierte Inhalt vonSo verschönern Sie Zeichen mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!