Using js in web design can achieve many page special effects, but many people ignore the powerful effects of META tags in HTML tags. In fact, meta tags can also achieve many beautiful page transition effects.
The META tag is an auxiliary tag in the HTML language HEAD area. The Meta tag is placed on the <head>...</head> of each web page.
In the middle, we are more familiar with:
<meta name=GENERATOR content=Microsoft FrontPage 3.0>//Instructions for editing tools;
<meta name=KEYWORDS content=...>//Explanation keywords;
<meta name=DESCRIPTION content=...>//Describe homepage description;
It provides information that is not visible to the user. Meta tags are usually used to define page topics for search engine robots, or to define cookies on the user's browser; they can be used to identify authors, set page formats, label content summary and keywords; they can also set pages to make them possible.
Refresh yourself according to the time interval you define, set the RASC content level, etc.
This article mainly explains how to use meta tags to generate page transition effects...
usage:
<Meta http-equiv=Page-Enter Content=blendTrans(Duration=0.5)>
<Meta http-equiv=Page-Exit Content=blendTrans(Duration=0.5)>
blendTrans is a type of css dynamic filter that produces a fading effect. Another dynamic filter RevealTrans can also be used for page entry and exit effects:
Dynamic filters can add moving fade and image conversion effects to the page. They can be divided into two types of blend (mix) and reveal (display).
The former can gradually disappear or appear, while the latter provides 24 image conversion effects...
<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 (unit: seconds)
Transition: Filter type. Indicates which special effect is used, the value is 0-23.
------------------------------------------------------------------------------
0: Rectangle shrink 1: Rectangle expand
2: Circle reduction 3: Circle expansion
4: Refresh down to top 5: Refresh up to bottom
6: Refresh left to right 7: Refresh right to left
8: Vertical blinds 9: Horizontal blinds
10: Displaced horizontal blinds 11: Displaced vertical blinds
12: Point diffusion 13: Refresh left and right to middle
14: Refresh from the middle to the left and right 15: Refresh from the middle to the upper and lower
16: Up and down to the middle 17: Down and right to the upper left
18: Top right to bottom left 19: Top left to bottom right
20: Lower left to upper right 21: Horizontal bar
22: Vertical bar 23: Choose one of the above 22 randomly
------------------------------------------------------------------------------
As long as the web page transformation effects are matched properly, these transformation effects will leave a very deep impression on visitors, even those who are not interested in your site. Especially for friends who like to learn web page production, they may copy your web page for study and research. In fact, you just added a short piece of code^_^ The web page transformation effect (Trans) is divided into four categories: entering the web page (Page-Enter), leaving the web page (Page-Exit), entering the site (Site-Enter), and leaving the site (Site-Exit). Each major category is divided into 25 subcategories. First, use the effect of entering the web page to illustrate:
Effects when entering a web page
1. The mixed 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 upward erase effect code is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=4)>
7. The downward erase effect code is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=4)>
8. The code for erasing the right to the effect is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=6)>
9. The left erase effect code is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=7)>
10. The vertical masking 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 chessboard effect code is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=10)>
13. The vertical board 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 effect code of the left and right indentation to the center is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=13)>
16. The effect code of the center to the left and right expansion is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=14)>
17. The up and down indentation effect code is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=16)>
18. The effect code of the center to the up and down is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=17)>
19. Extract the effect code from the bottom left as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=18)>
20. Extract the effect code from the upper left as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=19)>
twenty one. Extract the effect code from the bottom right as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=20)>
twenty two. Extract the effect code from the upper right as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=21)>
twenty three. The effect code of the random horizontal line is as follows: <meta http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=22)>
twenty four. The effect code of the random vertical line 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 these codes. First of all, you will definitely see that most of these codes are very similar. In fact, although there are many categories, the 25 sub-categories in each major category correspond to the same and are identified by numbers (except for the mixed effect blendTrans(Duration=1.0)), so there is no need to give examples to non-categories. Just replace Page-Enter with Page-Exit (leave the web page), Site-Enter (leave the site), and Site-Exit (leave the site), and you can achieve the desired effect, and it is also more convenient to remember. Where Duration=1.0 can set how long the time for each cycle is, the unit is seconds (now set is 1 second per cycle). It should be noted that the effects of the four major categories can be set at the same time on a web page, but each major category can only set one effect. In addition, if the web page is a frame page, the effect will not be displayed.