“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

CSS is a very special language. You think CSS can only be used to control the structure and style of a web page, but as long as you have a rich imagination, you can create endless possibilities.

In this article, you have selected 5 cool text effects using pure CSS. After enjoying them, you must realize and experience them yourself

Gradient text effect

The effect is mainly usedbackground-clip:textCooperate withcolorImplement gradient text effect first understandbackground-clip: text;Crop out the text inside the box as the clipping area. The area outside the text will be clipped out.

  1. Set the gradient background for the text container
 background: linear-gradient(90deg, black 0%, white 50%, black 100%);
Copy the code
  1. Set up thewebkit-background-clipProperty, clipped outwards with text as clipping area
-webkit-background-clip: text;
        background-clip: text;
Copy the code
  1. through-webkit-animationProperty setting animation can achieve the above effect
-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;
Copy the code
@-webkit-keyframes shining { from { background-position: -500%; } to { background-position: 500%; } } @keyframes shining { from { background-position: -500%; } to { background-position: 500%; }}Copy the code

2. Rainbow text effect (Running lantern)

The text {letter - spacing: 0.2 rem; The font - size: 1.5 rem; 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%; }Copy the code

The effect is also achieved by background-clip:text and linear gradient, and the effect of rainbow text is achieved by setting the color value of the region.

Dynamic rainbow text requires the -webkit-animation property

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

Three. Luminous text effect

The effect is mainly usedtext-shadowProperty implementation.text-shadowProperty to add one or more shadows to the text. This property is a comma-separated list of shadows, each specified with two or three length values and an optional color value.

.neon { color: #cce7f8; The font - size: 2.5 rem; -webkit-animation: Shining 0.5s alternate infinite; Animation: Shining 0.5s alternate infinite; }Copy the code
@-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; }}Copy the code

Typewriter effect

This effect is achieved primarily by changing the width of the container.

.typing { color: white; font-size: 2em; width: 21em; Height: 1.5 em. 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; }Copy the code
@keyframes typing {from {width: 0; } to { width: 21em; }} /* @keyframes blink-caret {from, to {border-color: transparent; } 50% { border-color: currentColor; }}Copy the code

White-space: Nowrap attribute is mainly used to ensure the display of a line. In consideration of the display of English letters, this attribute is removed to ensure that no character breaks occur.

Word-break :break-all Enables English characters to be displayed one by one.

The Steps function in the animation property allows the animation to execute intermittently rather than continuously.

Steps () syntax :steps(number, position), where the number keyword indicates the number of animation segments; The position keyword indicates whether the animation is continuous from the beginning or end of the time period. The two keywords start and end are supported, and their meanings are as follows:

  • start: indicates to start directly
  • end: Indicates an abrupt stop, which is the default value

Cursor effects are implemented through box-shadow emulation. With these attributes, a simple typewriter effect can be achieved

Five. Fault style text effect

The animation effect is more complex, mainly usedCSS pseudo-elements,Element custom attributes,The mask attribute,Animation animationAnd so on.

<div class="text" data-text=" welcome to wechat public 【 Front-End lab 】">Copy the code

Here we mainly use the custom attribute, data- plus the custom attribute name, and assign the text to be displayed for the pseudo-element to obtain the corresponding text.

@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); }}Copy the code

Here, two keyframes are set: animation-before and animation-after. The former is intended for before and the latter for after.

The clip-path attribute is the new attribute mask of CSS3, in which the inset() value represents that the mask shape is rectangular. After defining the mask’s scope of action, @keyframes is used to set the frame-by-frame animation, so that the scope of action of the mask changes in the vertical direction all the time to achieve the effect of shaking up and down.

.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: animation-before 3s infinite linear alternate-reverse;
}
Copy the code
.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: animation-after 3s infinite linear alternate-reverse;
}
Copy the code

Finally, we set two pseudo-elements before and after to the same position as the parent element respectively, and then move a little distance to the left and right to create a dislocation effect. Then, we set the background color to be the same as the background color of the parent element to hide the parent element

This can achieve a perfect fault style text display animation ~

Cool special effects can add a different style for our webpage, the effect of this article has been uploaded to Github, public number background reply AAA text effects can be obtained, come to learn with us!

Through the front door, there was a family

Original is not easy, praise, message, share is big brother to write down the power!