Heim > Artikel > Web-Frontend > Organisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen

Organisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen

WBOYnach vorne: 2022-01-13 18:19:524344Durchsuche

Dieser Artikel stellt Ihnen 5 sehr coole Texteffekte vor, die alle mit CSS implementiert werden. Ich hoffe, dass er Ihnen hilfreich sein wird.

CSS ist eine ganz besondere Sprache. Sie denken, dass CSS nur zur Steuerung der Struktur und des Stils von Webseiten verwendet werden kann, aber solange Sie über eine reiche Vorstellungskraft verfügen, können Sie unbegrenzte Möglichkeiten schaffen.

1. Verlaufstexteffekt

Dieser Effekt verwendet hauptsächlich Hintergrundclip: Text und Farbe, um den Verlaufstexteffekt zu erzielen. Verwenden Sie den Text innerhalb des Felds. Der Text wird als Zuschneidebereich nach außen zugeschnitten, und der Bereich außerhalb des Texts wird zugeschnitten.

Legen Sie einen Hintergrund mit Farbverlauf für den Textcontainer fest

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

-webkit-background-clip: text;
        background-clip: text;

Stilreferenz

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

2. Regenbogen-Texteffekt (Marquee)

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

Dieser Effekt wird auch mit „background-clip:text“ und dem linearen Farbverlaufsattribut „linear-gradient“ erzielt wird durch die Einstellung des regionalen Farbwerts erreicht.

Dynamischer Regenbogentext muss das Attribut -webkit-animation Organisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端实验室</p>
    </body>
</html>

CSS-Stil

.text {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
}

-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

3 festlegen. Leuchtender Texteffekt

Dieser Effekt wird hauptsächlich erreicht Verwenden des Textschattens Attribut. Die Eigenschaft text-shadow fügt dem Text einen oder mehrere Schatten hinzu. Bei dieser Eigenschaft handelt es sich um eine durch Kommas getrennte Liste von Farbtönen, wobei jeder Farbton mit zwei oder drei Längenwerten und einem optionalen Farbwert angegeben wird.

.rainbow {
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}
.rainbow span {
    animation: rainbow 50s alternate infinite forwards;
}
@keyframes rainbow {
    0% {
        color: #efc68f;
    }
    ...
    100% {
        color: #8fefed;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
    </body>
</html>

.neon {
    color: #cce7f8;
    font-size: 2.5rem;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
}

IV. Schreibmaschineneffekt

Dieser Effekt wird hauptsächlich durch die Änderung der Breite des Behälters erreicht. Das Attribut

@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }
    to {
        text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

.typing {
    color: white;
    font-size: 2em;
    width: 21em;
    height: 1.5em;
    border-right: 1px solid transparent;
    animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

white-space:nowrap dient hauptsächlich dazu, sicherzustellen, dass eine Zeile angezeigt wird. In Anbetracht der Anzeige englischer Buchstaben wird dieses Attribut entfernt, um sicherzustellen, dass es keine Zeichenunterbrechung gibt. Organisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen

word-break:break-all ermöglicht es, englische Zeichen einzeln darzustellen.

Mit der Schrittfunktion im Animationsattribut kann die Animation intermittierend statt kontinuierlich ausgeführt werden.

steps()-Syntax bedeutet: Schritte(Zahl, Position), wobei das Schlüsselwort „Zahl“ angibt, in wie viele Segmente die Animation unterteilt ist, und das Schlüsselwort „Position“ angibt, ob die Animation vom Anfang oder Ende des Zeitraums an kontinuierlich ist unterstützt Start und Ende. Die Bedeutung der Wörter ist wie folgt:

Start: bedeutet, direkt zu beginnen

Ende: bedeutet, abrupt anzuhalten, was der Standardwert ist
Der Cursoreffekt wird durch erreicht Box-Shadow-Simulation. Ein einfacher Schreibmaschineneffekt kann durch die oben genannten Attribute erreicht werden ~

5. Texteffekt im Glitch-Stil

Dieser Animationseffekt ist relativ komplex und verwendet hauptsächlich CSS-Pseudoelemente und Elementanpassungseigenschaften, Maskeneigenschaften und Animationen , usw.

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光标 */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

Hier verwenden wir hauptsächlich benutzerdefinierte Attribute, Daten sowie den benutzerdefinierten Attributnamen und weisen den anzuzeigenden Text zu, damit das Pseudoelement den entsprechenden Text erhalten kann. Organisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

Hier werden zwei Schlüsselbilder eingerichtet, nämlich Animation-vorher und Animation-nachher. Ersteres ist für Pseudo-Elemente davor und letzteres für Pseudo-Elemente danach.

Das Clip-Path-Attribut ist eine neue Attributmaske von CSS3. Der Wert inset() gibt an, dass die Form der Maske ein Rechteck ist. Stellen Sie die Frame-für-Frame-Animation über @keyframes ein Machen Sie die Maske Der Aktionsbereich ändert sich kontinuierlich in vertikaler Richtung, wodurch der Effekt eines Auf- und Abzitterns erzielt wird.

<div class="text" data-text="欢迎关注微信公众号【前端实验室】">
  欢迎关注微信公众号【前端实验室】
</div>

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

.text{
    display: inline-block;
    font-size: 3.5em;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}

Schließlich setzen wir zwei Pseudoelemente davor und danach, positionieren sie an der gleichen Position wie das übergeordnete Element und bewegen uns dann ein wenig nach links bzw. rechts, um einen falsch ausgerichteten Effekt zu erzeugen, und stellen dann die Hintergrundfarbe auf ein Zum Blockieren des übergeordneten Elements wird dieselbe Farbe wie die Hintergrundfarbe des übergeordneten Elements verwendet.

Auf diese Weise kann eine perfekte Textanzeigeanimation im Glitch-Stil erzielt werden.

Coole Spezialeffekte können unseren Webseiten einen anderen Stil verleihen , dieser Artikel Der Quellcode des erzielten Effekts wurde auf Github hochgeladen. Sie können ihn erhalten, indem Sie auf den aaa-Texteffekt im Hintergrund des öffentlichen Kontos antworten.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonOrganisieren und teilen Sie 5 reine CSS, um coole Texteffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist der Unterschied zwischen JSONP und Ajax?Nächster Artikel：Was ist der Unterschied zwischen JSONP und Ajax?

In Verbindung stehende Artikel

Mehr sehen