在网页中怎么样用CSS的动态过滤效果制作出图片的过渡效果?

html-css032

在网页中怎么样用CSS的动态过滤效果制作出图片的过渡效果?,第1张

<head>

<meta http-equiv="page-Exit" content="revealTrans(Duration=3.0,Transition=23)">

<meta http-equiv="page-Enter" content="revealTrans(Duration=3.0,Transition=23)">

<title></title>

</head>

其中的中间两句就起到动态的效果作用,Transition 滤镜类型。表示使用哪种特效,取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

CSS实现渐变背景效果兼容主流浏览器

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜filter

对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性 为-moz-linear-gradient属性

对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法为-webkit-gradient

代码如下:

.gradient{

width:300px

height:150px

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0)/*IE*/

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0)/*IE8*/

background:red /* 一些不支持背景渐变的浏览器 */

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)) /*Firefox*/

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))) /*Chrome/Safari*/

}

<div class="gradient"></div>