The neglected special effects of META tags (page transition effects)
|
Using js in web design can achieve many page effects, but many people ignore the powerful effect 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 HEAD area of the HTML language. The Meta tag is placed in the <head>...</head> of each web page. Among them, we are all familiar with: <meta name="GENERATOR" content="Microsoft FrontPage 3.0">//Description editing tool; <meta name="KEYWORDS" content="...">//Description of keywords; <meta name="DESCRIPTION" content="...">//Description of the homepage; It provides information that is not visible to the user. Meta tags are usually used to define the page theme for search engine robots, or to define cookies on user browsers; they can be used to identify authors, set page formats, mark content summaries and keywords; they can also set pages to refresh themselves according to the time intervals you define, and set RASC content levels, etc. This article mainly explains how to use meta tags to produce 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 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-in, fade-out and image transformation effects to the page. They can be divided into two types: blend and reveal. The former can make objects disappear or appear gradually, and the latter provides 24 image transformation 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 to use, with a value of 0-23. -------------------------------------------------------------------------------------------- 0: Rectangle shrinkage1: Rectangle expansion2: Circle shrinkage3: Circle expansion4: Refresh from bottom to top5: Refresh from top to bottom6: Refresh from left to right7: Refresh from right to left8: Vertical blinds9: Horizontal blinds10: Offset horizontal blinds11: Offset vertical blinds12: Dot spread13: Refresh from left to right to the middle14: Refresh from the middle to left and right15: Middle to top and bottom16: Top and bottom to middle17: Bottom right to top left18: Top right to bottom left19: Top left to bottom right20: Bottom left to top right21: Horizontal bar22: Vertical bar23: Randomly select one of the above 22 types -------------------------------------------------------------------------------------------- When used properly, web page transformation effects can leave a very deep impression on visitors, even those who were not originally interested in your site. Especially those friends who like to learn how to make web pages may copy your web page for the purpose of study and research. In fact, you just added a short piece of code ^_^ Web page transition effects (Trans) are divided into four categories: "Enter a web page" (Page-Enter), "Leave a web page" (Page-Exit), "Enter a site" (Site-Enter), and "Leave a site" (Site-Exit). Each major category is divided into 25 subcategories. Let’s take the page entry effect as an example: Effect when entering the web page 1. The blending effect code is as follows: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> 2. The code for the box-shaped shrinking effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 3. The code for the box-shaped radiation effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 4. The circular shrinking 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 wipe effect code is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 7. The downward wipe effect code is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 8. The code for the right erase effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)"> 9. The code for the left wipe effect 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 code for the horizontal chessboard effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)"> 13. The vertical chessboard effect code is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)"> 14. The code for the subsequent decomposition effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)"> 15. The code for the left and right indent effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)"> 16. The code for the center-to-left expansion effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)"> 17. The code for the indent effect from top to bottom is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)"> 18. The code for the center upward and downward expansion effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)"> 19. Extract the effect code from the lower 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 lower right corner as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)"> twenty two. Extract the effect code from the upper right corner as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)"> twenty three. The code for the random horizontal line effect is as follows: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> twenty four. 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 these codes. First of all, you can 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 ones and are identified by numbers (except for the blending effect blendTrans(Duration=1.0)), so there is no need to give examples for each major category one by one. Just replace "Page-Enter" with "Page-Exit" (leave the web page), "Site-Enter" (enter the site), "Site-Exit" (leave the site), and you can achieve the desired effect. It is also easier to remember. "Duration=1.0" can set the duration of each cycle in seconds (the current setting is 1 second per cycle). It should be noted that the four major categories of effects can be set simultaneously on 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. |
<<: Example code for implementing transparent gradient effects with CSS
Recommend
Steps to customize icon in Vue
ant-design-vue customizes the use of Ali iconfont...
A brief analysis of CSS :is() and :where() coming to browsers soon
Preview versions of Safari (Technology Preview 10...
After restarting the Baota panel, it prompts -ModuleNotFoundError: No module named 'geventwebsocket'
background: Because the server deployed the flask...
MySQL 5.7.23 version installation tutorial and configuration method
It took me three hours to install MySQL myself. E...
TortoiseSvn Little Turtle Installation Latest Detailed Graphics Tutorial
There were always problems when installing tortoi...
How to backup and restore the mysql database if it is too large
Command: mysqlhotcopy This command will lock the ...
CSS to implement QQ browser functions
Code Knowledge Points 1. Combine fullpage.js to a...
jQuery implements font size adjustment case
This article shares the specific code of jQuery t...
Some lesser-known sorting methods in MySQL
Preface ORDER BY 字段名升序/降序, I believe that everyon...
Solve the problem of MySQL server actively disconnecting when there is no operation timeout
When we use the MySQL service, under normal circu...
Detailed explanation of two methods for setting global variables and session variables in MySQL
1. There are two ways to modify global variables ...
Detailed explanation of the solution to the problem that FTP cannot connect to the Baota Linux panel
If you are using Alibaba Cloud Server, you need t...
CentOS 7.6 Telnet service construction process (Openssh upgrade battle first task backup transport line construction)
Whenever I have any unclear questions, I come to ...
Let me teach you how to use font icons in CSS
First of all, what is a font icon? On the surface...
Example code for implementing a QR code scanning box with CSS
We usually have a scanning box when we open the c...