Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge points about how CSS can achieve cool text effects. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

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

one。 Gradient text effect

This effect mainly uses background-clip:text with color to achieve gradient text effect. First, understand the meaning of background-clip:text;: cut outward with the text in the box as the cutting area, and all areas outside the text will be cut off.

Set a gradient background for the text container

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

Set the webkit-background-clip property to crop outward with text as the crop region

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

The above effect can be achieved by animating the-webkit-animation attribute.

-webkit-animation: shining 3s linear infinite; animation: shining 3s linear infinite;@-webkit-keyframes shining {from {background-position:-500%;} to {background-position: 500%;}} @ keyframes shining {from {background-position:-500%;} to {background-position: 500%;}}

Style referenc

Front-end laboratory

two。 Rainbow text effect (racing lantern)

.text {letter-spacing: 0.2; font-size: 1.5; 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%;}

This effect is also realized by using background-clip:text and linear gradient attribute linear-gradient, and the effect of rainbow text is realized by setting the color value of the area.

Dynamic rainbow text needs to be set-webkit-animation property

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

CSS style

.rainbow {letter-spacing: 0.2; font-size: 1.2; text-transform: uppercase;}. Rainbow span {animation: rainbow 50s alternate infinite forwards;} @ keyframes rainbow {0% {color: # efc68f;}. 100% {color: # 8fed;}} [Front Lab] share the latest and most practical front-end technologies

three。 Luminous text effect

This effect is mainly achieved by using the text-shadow attribute. The text-shadow property adds one or more shadows to the text. This attribute is a comma-separated list of shadows, each with two or three length values and an optional color value.

.neon {color: # cce7f8; font-size: 2.5remr;-webkit-animation: shining 0.5s alternate infinite; animation: shining 0.5s alternate infinite;} @-webkit-keyframes shining {from {text-shadow: 0 10px lightblue, 0 20px lightblue, 0 30px lightblue, 0 40px skyblue, 0 50px skyblue, 0 60px skyblue } to {text-shadow: 0 5px lightblue, 0 10px lightblue, 0 15px lightblue, 0 20px skyblue, 0 25px skyblue, 0 30px skyblue;}} [front-end laboratory] share the latest and most practical front-end technologies

four。 Typewriter effect

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

Typing {color: white; font-size: 2mm; width: 21em; height: 1.5mm; 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;} / * print effect * / @ keyframes typing {from {width: 0;} to {width: 21em }} / * cursor * / @ keyframes blink-caret {from, to {border-color: transparent;} 50% {border-color: currentColor;}} [frontend Lab] share the latest and most practical frontend technologies

The white-space:nowrap attribute is mainly used to ensure the display of one line. Taking into account the display of English letters, this attribute is removed to ensure that there will be no character break.

Word-break:break-all enables English characters to be presented one by one.

The steps function in the animation property allows the animation to be executed intermittently rather than continuously.

The syntax of steps () indicates: steps (number, position), where the number keyword indicates how many segments the animation will be divided into; the position keyword indicates whether the animation is continuous from the beginning or the end of the time period, and supports the keywords start and end. The meanings are as follows:

Start: means to start directly

End: indicates an abrupt stop, which is the default value

The cursor effect is achieved by box-shadow simulation. A simple typewriter effect can be achieved through the above properties.

five。 Fault style text effect

The animation effect is more complex, mainly using CSS pseudo-elements, element custom attributes, mask attributes, animation animation and so on.

Welcome to the official account of Wechat [front-end laboratory]

Here, we mainly use custom attributes, data- plus custom attribute names, and assign the text to be displayed for pseudo elements to get the corresponding text.

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

Two keyframes are set here, animation-before and animation-after, the former is intended for use by the pseudo element before, and the latter is used by the pseudo element after.

The clip-path attribute is a new attribute mask of CSS3, and the inset () value indicates that the shape of the mask is rectangular. After defining the action area of the mask, frame-by-frame animation is set through @ keyframes, so that the action area of the mask changes vertically to achieve the effect of dithering up and down.

.text {display: inline-block; font-size: 3.5eme; font-weight: 600; padding: 04px; color: white; position: relative;} .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 } .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;}

Finally, we set two pseudo elements, before and after, to the same position as the parent element, and then move a little to the left and right, respectively, to create a misplaced effect, and then set the background color to the same color as the background color of the parent element, which is used to block the parent element.

These are all the contents of the article "how to achieve cool text effects in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.