CSS Wave滤镜用法示例

 　　CSS Wave滤镜可能很多朋友并不喜欢用，其实用的好了，可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式，使对象年上去像波浪一样。语法示例：filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)。以下是Wave 滤镜各个参数说明：

　　wave 把对象按垂直的波形样式打乱。

　　默认是 TRUE(非0)

　　ADD 是否要把对象按照波形样式打乱

　　freq 波纹的频率

　　lightstrength 对波纹进行增强光影效果，数值0——100

　　phase 设置正弦波的偏移量

　　strength 波形振幅大小

　　下面通过一个示例代码：演示和介绍CSS Wave滤镜的详细用法：<img src="/jscss/demoimg/wall9.jpg" style="filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)">

　　效果实例演示：

时间： 2024-08-14 04:49:31

CSS Wave滤镜用法示例的相关文章

CSS 滤镜——Wave 滤镜

css|滤镜 Wave 滤镜语法 {filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 参数  说明 wave 把对象按垂直的波形样式打乱.默认是 TRUE(非0) ADD 是否要把对象按照波形样式打乱 FREQ 波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹 LIGHTSTRENGTH 可以对于波纹增强光影的效果,范围0----100 PHASE 设置正弦波的偏移量

学习网页中的图片如何应用CSS的滤镜的效果

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事. 我们先从较简单的开始,介绍几个没有参数的滤镜. 1.Gray滤镜 Gray滤镜的作用是产生黑白效果 使用方法:<img src=www.ddvip.com" style="filter:gray"> 2.In

CSS的滤镜的效果详细介绍

有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事. 我们先从较简单的开始,介绍几个没有参数的滤镜. 1.Gray滤镜 Gray滤镜的作用是产生黑白效果 使用方法: 以下是引用片段: <img src="a.gif" style="filter:gray"&

PHP实现的多文件上传类及用法示例_php技巧

本文实例讲述了PHP实现的多文件上传类及用法.分享给大家供大家参考,具体如下: 1.upFiles.css.php 文件 <?php class UploadFiles{ private $maxsize = '1000000'; //允许上传文件最大长度 private $allowtype = array('jpg','png','gif','jpeg');//允许上传文件类型 private $israndfile = true;//是否随机文件名 private $filepath;//

jQuery简单自定义图片轮播插件及用法示例_jquery

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】_jquery

本文实例讲述了jQuery图片前后对比插件beforeAfter用法.分享给大家供大家参考,具体如下: 今天分享一款 jquery 插件--图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>图片前后对比</title> </head&g

jquery自动补齐功能插件flexselect用法示例_jquery

本文实例讲述了jquery自动补齐功能插件flexselect用法.分享给大家供大家参考,具体如下: 这几天正在做一个东东.需要用到自动补齐的功能.也就是select控件的文本项可以让它写.默认的select文本框是只读的,不能写.在网上找到一个jQuery插件:flexselect可以完成这项功能. 将插件放到项目里.然后在页面中引用这个插件. <script src="${pageContext.request.contextPath}/js/jquery.flexselect-0.2

CSS各种滤镜制作10种艺术效果字

css|滤镜 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. 效果一: www.webjx.com 这个效果用了shadow滤镜,代码如下: filter:shadow(color=black,direction=135) 效果二: www.webjx.com 用blur滤镜做出的效果,代码如下: filter:blur(direction=135,strength=10) 效果三: www.webjx.com 用dropshadow滤

html 中 #include file 的用法示例介绍

 html 中 #include file 的用法示例介绍 有两个文件a.htm和b.htm,在同一目录下a.htm内容如下 代码如下: <!-- #include file="b.htm" --> b.htm内容如下 今天:雨 31 ℃-26 ℃ <br />明天:雷阵雨 33 ℃-27 ℃ 直接在浏览器中打开a,没有任何显示,后来知道,include是SSI(Server Side Include),在html中不支持include,之后把a.htm改成a.