CSS conversion filter Overview

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS provides many powerful filters, providing us with very convenient conditions.
It is divided into the interface filter (procedural surfaces)
Static Filters)
And the conversion filter (transitions), everybody first get familiar with the conversion filter, the other two will talk about it later, haha ~~
----------------------------
Note: Except revealtrans and blendtrans, the other operations must be correctly run under ie5.5 +!

Barn Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Motion: Optional. String ). Sets or retrieves whether the new content of an object is first displayed from the external or from the internal. Out | in out: default value. The conversion is performed from the center of the object to the four sides.
In: converts an object from its four sides to its center.

Orientation: Optional. String ). Set or retrieve the horizontal or vertical switch door of the filter effect simulation. Vertical | horizontal vertical: default value. Vertical Line conversion.
Horizontal: horizontal line conversion.

<HTML>

<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> Create web page 1 </title>
<Script language = "JavaScript">
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>

</Html>

Blinds Filter
Main attributes:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format'
Bands: Optional. Integer ). Set or retrieve the number of blinds in the filter effect. The value range is 1-100. The default value is 10.
Direction: Optional. String ). Set or retrieve the direction of the shutter switch. Down | up | right | left

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. blinds (Direction = down, duration = 2, bands = 13 );
Width: 333; Height: 222; ">
</Body>
</Html>

Duration can also be used in the special effects for entering and exiting the page.

Special effects for entering and exiting the page

This is some special effects of page loading and calling. Duration indicates the duration of the special effect, in seconds. Transition indicates which special effect is used. The value ranges from 1 to 23:

0 rectangular narrowing
1. rectangular enlargement
2 rounded down
3. Circular Expansion
4. Refresh from bottom to top
Refresh from top to bottom
6-left-right refresh
7. right-to-left refresh
8 vertical blinds
9 horizontal blinds
10 misplaced horizontal blinds
11 misplaced vertical blinds
Spread
Refresh from around 13 to the center
14. Refresh from center to left
15.
16 up to the middle
17 bottom right to top left
18 top right to bottom left
19 upper left to lower right
20 bottom left to top right
21 horizontal bars
22 vertical bars
23 or more 22 types of random selection

Checkerboard Filter

Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Squaresx: Optional. Integer ). Sets or retrieves the number of horizontal filters. The value range is> = 2. The default value is 12. Any value smaller than 2 will be converted to the default value 12.
Squaresy: Optional. Integer ). Set or retrieve the number of vertical filters. The value range is> = 2. The default value is 10. Any value smaller than 2 will be converted to the default value 10.
Direction: Optional. String ). Set or retrieve the direction of the grid push and pull. Down | up | right | left down: down.
Up: up.
Right: default value. Right.
Left: left.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. checkerboard (Direction = right, duration = 2 );
Width: 333; Height: 222; ">
</Body>
</Html>

Fade Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Overlap: Optional. Floating Point Number (real ). Set or retrieve the ratio of the source content and target content displayed in the conversion process. The value range is 0.0-1.0. The default value is 1.0.
If the value of this attribute is set to 0.4 and the value of duration is set to 10, conversion will result in subordinate behavior:
In the first three seconds, the source object is hidden.
In the next four seconds, the source object is completely hidden, and the new content is hidden at the same time.
In the last three seconds, the new content is completely hidden.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Fade (duration = 2 );
Width: 333; Height: 222; ">
</Body>
</Html>

Gradientwipe Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Gradientsize: Optional. Floating Point Number (real ). Sets or retrieves the percentage of objects whose content is overwritten by gradient entries. The value range is 0.0-1.0. The default value is 0.25.

Motion: Optional. String ). Whether to set or retrieve the orientation of the object content based on the wipestyle attribute or reverse. Forward | reverse forward: default value. The object content appears based on the flow direction set by the wipestyle feature.
Reverse: the reverse direction of the flow direction of the object content based on the wipestyle feature.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. gradientwipe (duration = 3, gradientsize = 0.5 );
Width: 333; Height: 222; ">
</Body>
</Html>

Inset Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. inset ();
Width: 333; Height: 222; ">
</Body>
</Html>

Pixelate Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Maxsquare: Optional. Integer ). Set or retrieve the maximum width of the rectangle Color Block in the conversion. The value range is 2-50. The default value is 50.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. pixelate ();
Width: 333; Height: 222; ">
</Body>
</Html>

Radialwipe Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Wipestyle: read/write. String ). Sets or retrieves the erasure method used by the conversion. Clock | wedge | radial clock: default value. Rotate and erase clockwise from the top of the center around the object.
Wedge: the center around the object, starting from the top, and rotating and erasing to both sides.
Radial: rotate and erase with the center in the upper left corner of the object as the center.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. radialwipe (duration = 2, wipestyle = 1 );
Width: 333; Height: 222; ">
</Body>
</Html>

Randombars Filter

Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Orientation: read/write. String ). Set or search whether the random line used for conversion is horizontal or vertical. Horizontal | Vertical Horizontal: default value. Horizontal line.
Vertical: vertical line.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. randombars (duration = 2 );
Width: 333; Height: 222; ">
</Body>
</Html>

Randomdissolve Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. randomdissolve ();
Width: 333; Height: 222; ">
</Body>
</Html>

Slide Filter

Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Bands: Optional. Integer ). Set or retrieve the number of slide in the filter effect. The value range is 1-100. The default value is 1.
Slidestyle: Optional. String ). Sets or retrieves the effect of a slide. Hide | push | swap hide: default value. Extract the old content from the new content.
Push: pull the old content in the same direction to pull the new content.
Swap: swap New and Old content while detaching.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Slide (duration = 2, bands = 5, slidestyle = Push );
Width: 333; Height: 222; ">
</Body>
</Html>

Spiral Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Gridsizex: Optional. Integer ). Set or retrieve how many times the filter effect is circled horizontally. The value range is 1-100. The default value is 16.
Gridsizey: Optional. Integer ). Set or retrieve how many times the filter effect is circled vertically. The value range is 1-100. The default value is 16.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Spiral (duration = 1, gridsizex = 5, gridsizey = 2 );
Width: 333; Height: 222; ">
</Body>
</Html>

Stretch Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Stretchstyle: read/write. String ). Sets or retrieves the method of transformation from stretch to deformation. Spin | hide | push spin: default value. Draw new content from the center to the left and right sides on the old content.
Hide: Stretch (contract) the new content from left to right on the old content.
Push: Pull the new content from left to right and squeeze the old content at the same time. The visual effect of this conversion method is similar to that of the cube from one side to the other.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Stretch (duration = 2, stretchstyle = spin); width: 333; Height: 222;">
</Body>
</Html>

Strips Filter
Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Motion: read/write. String ). Set or retrieve the starting corner of the new conversion content. Leftdown | leftup | rightdown | prightup leftdown: default value. From the lower left to the upper right corner.
Leftup: from the upper left corner to the lower right corner.
Rightdown: From the bottom right to the top left corner.
Rightup: from the upper right corner to the lower left corner.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. strips (); width: 333; Height: 222;">
</Body>
</Html>

Wheel Filter

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Wheel (); width: 333; Height: 222;">
</Body>
</Html>

Zigzag Filter

Attribute:
Duration: Optional. Floating Point Number (real ). Set or retrieve the time used to complete the conversion. The value is in the second. Millisecond (0.0000) format.
You can use the iduration parameter of the play method to set the conversion playback duration. However, once you call the play method, the duration feature becomes read-only during the playback duration.
Gridsizex: Optional. Integer ). Set or retrieve how many times the filter effect is circled horizontally. The value range is 1-100. The default value is 16.
Gridsizey: Optional. Integer ). Set or retrieve how many times the filter effect is circled vertically. The value range is 1-100. The default value is 16.

<HTML>
<Head>
<Script language = JavaScript>
Function show ()
{
IECN. Filters. Item (0). Apply ();
IECN. src = "http://iecn.net/forum/banners/csdn_120x60.gif ";
IECN. Filters. Item (0). Play ();
}
</SCRIPT>
</Head>
<Body onload = "show ()">
Style = "filter: progid: DXImageTransform. Microsoft. Zigzag (); width: 333; Height: 222;">
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS conversion filter Overview

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

CSS conversion filter Overview

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support