Home  >  Article  >  Web Front-end  >  The neglected special effects of META tags (page transition effects)_HTML/Xhtml_Web page production

The neglected special effects of META tags (page transition effects)_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:40:081344browse

Using js in web design can achieve many page special effects. However, many people ignore the powerful effect of the META tag in HTML tags. In fact, the meta tag can also achieve many beautiful page transition effects. The
META tag is an auxiliary tag in the HEAD area of ​​HTML language. The Meta tag is placed in the middle of

...
of each web page. The ones we are all familiar with are:
//Description editing tool;
//Description keywords;
//Description home page description;
It provides information invisible to users. The meta tag is usually used to define the page theme for search engine robots, or to define cookies on the user's browser; it can be used to identify the author, set the page format, mark the content summary and keywords; it can also set the page so that it can
Refresh yourself according to the time interval you define, and set the RASC content level, etc.
This article mainly explains how to use meta tags to produce page transition effects....

Usage:



blendTrans is a type of CSS dynamic filter that produces a fade effect. Another dynamic filter, RevealTrans, can also be used for page entry and exit effects:
Dynamic filters can add moving fade-in and fade-out and image transformation effects to the page. It can be divided into two types: blend (mixed) and reveal ( Display),
The former can make objects gradually disappear or appear, and the latter provides 24 image transformation effects...


Duration: representation The duration of the filter effect (unit: seconds)
Transition: filter type. Indicates which special effect to use, the value is 0-23.
-------------------------------------------------- ----------------------------------
0: Reduce rectangle 1: Expand rectangle
2: Reduce circle 3: Circular expansion
4: Refresh from bottom to top 5: Refresh from top to bottom
6: Refresh from left to right 7: Refresh from right to left
8: Vertical blinds 9: Horizontal blinds
10 : Offset horizontal blinds 11: Offset vertical blinds
12: Point spread 13: Refresh from left to right to the middle
14: Refresh from the middle to left and right 15: Middle to up and down
16: Up and down to the middle 17: Lower right to upper left
18: Top right to bottom left 19: Top left to bottom right
20: Bottom left to top right 21: Horizontal bar
22: Vertical bar 23: Randomly select one of the above 22 types
----- -------------------------------------------------- -----------------------
As long as the webpage transformation effects are properly matched, these transformation effects will leave a very deep impression on visitors, even those who are originally Visitors who are not interested in your site. Especially friends who like to learn web page production may copy your web page for study and research purposes. In fact, you just added a short piece of code^_^ The web page transformation effect (Trans) is divided into four categories: "Enter the web page" (Page-Enter), "Leave the web page" (Page-Exit), and "Enter the site" (Site-Enter), "Leave the site" (Site-Exit). Each major category is divided into 25 subcategories. First, use the effect of entering the webpage to illustrate:

The effect of entering the webpage
1. The mixing effect code is as follows:
2. The code for the box shrink effect is as follows:
3. The box-shaped radiation effect code is as follows:
4. The code for the circular shrinkage effect is as follows:
5. The code for circular radiation effect is as follows:
6. The code for upward erasing effect is as follows:
7. The code for the downward erase effect is as follows:
8. The code for the right erase effect is as follows:
9. The code for the left erase effect is as follows:
10. The code for vertical masking effect is as follows:
11. The code for horizontal masking effect is as follows:
12. The code for horizontal checkerboard effect is as follows:
13. The code for vertical checkerboard effect is as follows:
14. Then the decomposition effect code is as follows:
15. The code for the indentation effect from left to right to the center is as follows:
16. The code for expanding the effect from the center to the left and right is as follows:
17. The code for the indentation effect up and down to the center is as follows:
18. The code for the center upward and downward expansion effect is as follows:
19. The code to extract the effect from the lower left is as follows:
20. The code to extract the effect from the upper left is as follows:
21. The code to extract the effect from the lower right is as follows:
22. The code to extract the effect from the upper right is as follows:
23. The random horizontal line effect code is as follows:
24. The random vertical line effect code is as follows:
25. The random effect code is as follows:

Now let’s analyze these codes. First of all, you can definitely see that most of these codes are very similar. In fact, although there are many categories, the 25 subcategories under each major category correspond to the same and are identified by numbers (except for the blending effect blendTrans(Duration=1.0)), so there is no need to distinguish each major category. For example, just replace "Page-Enter" with "Page-Exit" (leave the web page), "Site-Enter" (enter the site), and "Site-Exit" (leave the site), and you can achieve the desired effect. , and it is also easier to remember. Among them, "Duration=1.0" can set the time of each cycle in seconds (the current setting is 1 second per cycle). It should be noted that the effects of four major categories can be set at the same time in one web page, but only one effect can be set for each major category. In addition, if the web page is a frame page, the effect will not be displayed.
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