The meta tag provides 24 dynamic page effects.

Source: Internet
Author: User
Tags microsoft frontpage
Meta Tags Enable dynamic page Effects
Night e tutorial Source: www.yyjcw.com Date: 13:30:20
In web design, JS can be used to implement many page effects. However, many people ignore the meta tag in HTML tags.
In web design, JS can be used to implement many page effects. However, many people ignore the meta tag in HTML tags.
Powerful, in fact, meta tags can also achieve a lot of beautiful page transition effects.
The meta tag is an auxiliary tag in the head area of the HTML language. The meta tag is placed in the In the middle, we are all familiar with the following:
<Meta name = "generator" content = "Microsoft FrontPage 3.0"> // describes the editing tool;
<Meta name = "keywords" content = "..."> // describes keywords;
<Meta name = "Description" content = "..."> // describes the homepage description;
It provides invisible information to users. Meta Tags are usually used to define page themes for search engine robots or user browsers.
The cookie. It can be used to identify the author, set the page format, and annotate the content feed and keywords. You can also set the page to enable
Refresh yourself according to the defined time interval, set the RASC content level, and so on.
This article describes how to use meta tags to generate page transition results .....
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 gradual effect. Another dynamic filter, revealtrans, can also be used for page entry and exit effects:
A dynamic filter can add a moving fade-in and fade-out effect and an image conversion effect to a page. It can be divided into two types: Blend and reveal ),
The former can gradually disappear or appear, and the latter provides 24 types of 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: the duration of the filter effect (unit: seconds)
Transition: filter type. Which special effect is used? The value ranges from 0 to 23. ------------------------------------------------------------------------------
0: rectangular area reduced 1: rectangular area expanded
2: circular area reduced 3: circular area expanded
4: bottom-up refresh 5: top-down refresh
6: left-to-right refresh 7: right-to-left refresh
8: vertical blinds 9: horizontal blinds
10: misplaced horizontal blinds 11: misplaced vertical blinds
12: Point Spread 13: Refreshing between left and right
14: center to left and right refresh 15: center to up and down
16: Up and down to the middle 17: right down to the top left
18: Top right to bottom left 19: Top left to bottom right
20: Bottom left to top right 21: horizontal bar
22: vertical bars 23: one of the 22 or more types of random selection
------------------------------------------------------------------------------ If the webpage transform effect is properly matched, these changes will impress visitors, even those who are not interested in your site. Especially those who like to learn how to create web pages, they are likely to copy your web pages for study and research. In fact, you just added a short piece of code) site-enter and site-exit ). Each category is divided into 25 sub-categories. The following uses the webpage effect as an example:
Effect of webpage access
1. The mixed effect code is as follows: <meta http-equiv = "Page-Enter" content = "blendtrans (duration = 1.0)">
2. The code for the box-like contraction effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 0)">
3. The code for the box-like radiation effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 1)">
4. Code for circular contraction: <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 code for the upward erasure effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 4)">
7. The code for the downward erasure effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 4)">
8. The code for right erasure is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 6)">
9. The code for erasing the effect from the left is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 7)">
10. The code for the vertical masking effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 8)">
11. The code for the horizontal masking effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 9)">
12. The code for the horizontal board effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 10)">
13. The code for the portrait board effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 11)">
14. The code for splitting the results is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 12)">
15. The code for indent left and right to the center is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 13)">
16. The code for extending the central direction to the left and right is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 14)">
17. The code for the up-down central indent effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 16)">
18. The code for extending the result from the center to the bottom is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 17)">
19. The code for extracting results from the bottom left is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 18)">
20. The code for extracting results from the top left is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 19)">
21. The code for extracting results from the bottom right is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 20)">
22. The code for extracting results from the top right is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 21)">
23. The code for the random horizontal line effect is as follows: <meta http-equiv = "Page-Enter" content = "revealtrans (duration = 1.0, transition = 22)">
24. The code for the random vertical line effect 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. First of all, we can see that the code is very similar in most places. In fact, although there are many categories, the 25 sub-classes in each category correspond to the same one and are identified by numbers (except for the mixed effect blendtrans (duration = 1.0 )), therefore, you do not need to give an example of no major category. You only need to replace "Page-Enter" with "Page-Exit" or "Site-Enter" to enter the site), "Site-Exit" (leave the site), you can achieve the desired effect, and it is more convenient to remember. "Duration = 1.0" sets the duration of each cycle, in seconds (currently set to 1 second per cycle ). Note that the effects of the four categories can be set simultaneously on one webpage, but only one effect can be set for each category. In addition, if the webpage is a frame page, the effect cannot be displayed.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.