Overlooked Meta tag effects (page transitions)

The use of JS in the web design can achieve a lot of page effects, but many people ignore the HTML tag of the powerful effect of meta tags, in fact, meta tags can also achieve a lot of beautiful page transition effect.
The META tag is an accessible tag in the head area of the HTML language, and the meta tag is placed on each page of the In the middle, we are all more familiar with such as:
<meta name= "GENERATOR" content= "Microsoft FrontPage 3.0" >//Description Editing Tool;
<meta name= "KEYWORDS" content= "..." >//description keywords;
<meta name= "DESCRIPTION" content= "..." >//description home page description;
It provides information that is not visible to the user. Meta tags are often used to define page themes for search engine robots, or to define cookies on the user's browser, which can be used to identify the author, format the page, annotate the content feed and keywords, or set the page to
Refresh yourself According to the interval you define, and set the RASC content level, and so on
This article mainly explains how to use META tags to create page transitions .....

Usage:
<meta http-equiv= "Page-enter" content= "Blendtrans (duration=0.5)" >
<meta http-equiv= "Page-exit" content= "Blendtrans (duration=0.5)" >

Blendtrans is a CSS dynamic filter that produces a fade effect. Another dynamic filter Revealtrans can also be used for page entry and exit effects:
A live filter can add a moving fade, image conversion effect to a page that can be divided into two blend (blend) and reveal (display)
The former can make the object fade away or appear, the latter provides 24 kinds of image transformation effect ...
<meta http-equiv= "Page-enter" content= "Revealtrans (duration=x, transition=y)" >
<meta http-equiv= "Page-exit" content= "Revealtrans (duration=x, transition=y)" >
Duration: Indicates the duration of the filter effect (in seconds)
Transition: Filter type. Indicates which effect to use, with a value of 0-23.
------------------------------------------------------------------------------
0: Rectangle reduction 1: Rectangle enlargement
2: Round reduction 3: round enlargement
4: Down to top refresh 5: top to bottom refresh
6: Left to right refresh 7: Right to left refresh
8: Vertical Shutter 9: Horizontal Blinds
10: Dislocation Horizontal shutter 11: Dislocation Vertical Blinds
12: Point diffusion 13: around to Middle refresh
14: Middle to left/right refresh 15: Middle to Upper and lower
16: Up and down to Middle 17: right down to top left
18: Top Right to bottom left 19: top left to bottom right
20: Bottom left to top 21: Horizontal bar
22: Vertical Bar 23: The above 22 random selection of a
------------------------------------------------------------------------------
As long as the Web page transforms properly, these transformations will impress the visitors, even those who are not interested in your site. In particular, like to learn web-making friends, it is possible to copy your pages, for the study of research. In fact, you just added a short piece of code. ^_^ Web Page Transform effect (Trans) is divided into four categories: "Enter the page" (Page-enter), "Leave the page" (page-exit), "Enter the site" (site-enter), "Leave the site" (Site-exit). Each major category is divided into 25 small categories, first using the page effect to illustrate:

Effects when entering a Web page
1. The mixing effect code is as follows: <meta http-equiv= "Page-enter" content= "Blendtrans (duration=1.0)" >
2. The box-shaped shrinkage effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=0)" >
3. The box-shaped radiation effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=1)" >
4. The circular shrinkage effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=2)" >
5. The circular radiation effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=3)" >
6. The up-erase effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=4)" >
7. The down-erase effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=4)" >
8. The right erase effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=6)" >
9. To erase except the effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=7)" >
10. The vertical shading effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=8)" >
11. The horizontal masking effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=9)" >
12. The horizontal checkerboard effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=10)" >
13. The vertical checkerboard effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=11)" >
14. The decomposition effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=12)" >
15. The right-to-center indent effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=13)" >
16. The central left-right extension effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=14)" >
17. The upper and lower center indent effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=16)" >
18. The central up and down extension effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=17)" >
19. From the bottom left pull the effect code as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=18)" >
20. Extract the effect code from the top left as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=19)" >
21. From the bottom right, pull the effect code as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=20)" >
22. Extract the effect code from the top right: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=21)" >
23. The random horizontal line effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=22)" >
24. The random vertical Line effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=22)" >
25. The random effect code is as follows: <meta http-equiv= "Page-enter" content= "Revealtrans (duration=1.0,transition=23)" >

Now let's analyze the code, and first of all you'll see that the code is similar in most places. In fact, although the classification is many, but under each big class of 25 small classes are corresponding to the same, and the number to identify, (in addition to the mixed effect Blendtrans (duration=1.0)), so do not have a large class one by one for example, as long as the "Page-enter" for " Page-exit "(Leave the page)," Site-enter "(Enter the site)," Site-exit "(leave the site), you can achieve the desired effect, but also more convenient to remember. where "duration=1.0" can set the time of each cycle, the unit is seconds (now set is the weekly period of 1 seconds). It is important to note that the effects of four large classes can be set at the same time in a single page, but each large class can only set one effect. In addition, if the page is a frame page, it will not show the effect.

Overlooked Meta tag effects (page transitions)