Home >Web Front-end >CSS Tutorial >Summary of 7 typical text effects cases

Summary of 7 typical text effects cases

零下一度
零下一度Original
2017-06-05 16:40:504972browse

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

Summary of 7 typical text effects cases

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

Summary of 7 typical text effects cases

## 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

Summary of 7 typical text effects cases

##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:

Summary of 7 typical text effects cases

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

6.

text-shadow text effect implementation method

Summary of 7 typical text effects cases

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)

Summary of 7 typical text effects cases

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn