Summary of 7 typical text effects cases

In the past, the text on the web page was relatively simple. Apart from setting the size, color, and thickness, there were no outstanding special effects. Of course, excellent text layout can also make the page look comfortable and warm, but when we need to make the page Shockingly, CSS can help us achieve some cool text effects. The following are 6 typical text special effects cases, for your reference only

1. Text special effects examples

1. Sample code to implement css text flying into effect

It should be noted that you need to add an overflow: hidden; to the body at the beginning to set the overflow to be hidden, otherwise the text If the initial displacement exceeds the page size, a horizontal scroll bar will appear at the bottom of the page

2. Text scrolling special effects code_jquery text special effects_js text special effects

Various styles of text scrolling special effects codes, including jquery text special effects codes, js text special effects codes, CSS3 text Special effects code, HTML5 text special effects code, if you want to find the text special effects code, go to the PHP Chinese website source code site, and download them all for free!

3. Simple creation of HTML5 page turning text effects

## I saw a relatively innovative HTML5 text effect on the Internet before. The text effect is that when the mouse slides over, the effect of opening and folding appears, similar to turning pages in a book. So I excitedly clicked on the open source code and looked at it, and found that the implementation was actually quite simple. It mainly used the transform attribute of CSS3 to flip the X-axis, Y-axis, and Z-axis respectively

4. Sample code sharing of CSS3 fonts and text effects

##CSS3 allows us to use custom fonts

There are also some good text effects

Custom fonts

Using custom fonts requires the use of @font-face rules

Of course you must first have a custom text file

5. Align the css icon with the text Description of two implementation methods

#In the process of writing pages, we often encounter the situation of aligning small icons with text. For example:

summarizes two methods, both of which have relatively small amounts of code.

6.

text-shadow text effect implementation method

Basic text shadow effect, but apply the text-shadow attribute You can get a lot of gorgeous effects. Note: IE9-does not support this attribute.

7.

5 Cool and Practical Web Text Effects Download Recommendations (Collection)

Add them appropriately to the web page Some text effects will make our web pages more vivid. Today, PHP Chinese website will share with you 5 cool web page text effects. These text effects are very practical. You can download and use them for free

2. Related questions and answers:

1.

javascript - Are there any JS libraries that display text effects (non-synthetic) on images?

2.

How to achieve the text effect of background rounded corners on Android?

【Recommended related articles】:

1.

css text effect, text color has light and shadow flow

2.

h5 Example of Fill and Stroke text effects in Canvas

The above is the detailed content of Summary of 7 typical text effects cases. For more information, please follow other related articles on the PHP Chinese website!