怎样在CSS里面实现字体的动感模糊倒影效果和图片雾化效果

html-css024

怎样在CSS里面实现字体的动感模糊倒影效果和图片雾化效果,第1张

你这种情况比较复杂!都是滤镜做的

字体动感模糊窗口--图层，右击字体图层，删格式化文件，滤镜--模糊--动感模糊，选择角度和距离，角度表示你动感模糊的方向，距离越大动感模糊效果越厉害

图片雾化在你原有图层上新建图层保证前景色和背景色为黑白，滤镜--渲染--云彩，将图层模式正常改为滤色即可。。如果觉得雾化太重可以适当降低不透明度

弄了半天,研究出来了.你把下面的1.jpg换下.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>图片倒影效果loaoao.com </title>

</head>

<body>

<div style="margin:autowidth:300pxheight:400px">

<img src="1.jpg" width="300" height="199">

<img src="1.jpg" style='filter:flipv() Alpha(startX=77, startY=0, finishX=77, finishY=202,style=1,opacity=25,finishOpacity=0)' width="300" height="199">

</div>

</body></html>

代码：

1、内部插入式

在〈head〉与〈/head〉之间插入：

style type = text/css〉

.TurnH{filter:FlipH}

/style〉

然后在图片属性代码中加class="TurnH"。

注意：在〈head〉与〈/head〉之间插入代码中，TurnH前有一个“.”(不包括引号)，请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入：

style=" filter: FlipH"

特点：通过使用CSS的“FlipH”滤镜，使图片水平翻转。“FlipH”滤镜是CSS的6个无参数滤镜中的一个，可直接使用，在Dreamweaver中可以同有参数的滤镜一样使用。

图片垂直翻转

代码：

1、内部插入式

在〈head〉与〈/head〉之间插入：

〈style type = text/css〉

.TurnV{filter:FlipV}

〈/style〉

然后再在图片属性代码中加class="TurnV"。

注意：在〈head〉与〈/head〉之间插入代码中，TurnV前有一个“.”(不包括引号)，请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入：

style="filter:FlipV"

特点：通过使用CSS的无参数滤镜“FlipV”滤镜，使图片垂直翻转。

以上两种滤镜如果合理配合还可以做出类似水中倒影的效果哦，其中具体过程就请你自己去摸索了，在这里就不说了！ 希望对你有帮助