html5波浪线条,HTML5 svg炫酷波浪线条动画插件

这是一款HTML5 svg炫酷波浪线条动画插件。该波浪动画插件基于tweenMax和SVG，也可以作为jQuery插件来使用，可以制作出漂亮的波浪线条动画特效。

使用方法

在页面中引入jquery和TweenMax.min.js文件，以及wavify.js和jquery.wavify.js文件。

HTML结构

然后在页面中创建一个空的SVG元素。

My Wave Animation

初始化插件

在页面DOM元素加完毕之后，在path元素上调用wavify()方法来初始化插件。

$('#demo').wavify();

配置参数

该浪线条动画插件的可用配置参数有：

container：父容器的选择器，用于在尺寸变化时计算波浪的大小。默认为body。

color：波浪的颜色，默认为rgba(255,255,255, 0.20)。

bones：波浪的节点，默认值为3。

speed：波浪动画的速度。默认值为0.15。

height：波峰至波谷高度。默认值为200。

amplitude：波传播的垂直距离。默认值为100。

例如：

// For jQuery

var myWave = $('#myID').wavify({

height: 60,

bones: 3,

amplitude: 40,

color: 'rgba(150, 97, 255, .8)',

speed: .25

});

// For Vanilla JavaScript

var myWave = wavify( document.querySelect('#myId'), {

height: 60,

bones: 3,

amplitude: 40,

color: 'rgba(150, 97, 255, .8)',

speed: .25

})

方法

该浪线条动画插件的可用方法有：

pause：暂停波浪动画。

play：继续执行波浪动画。

kill：销毁当前的波浪动画。

reboot：重启波浪动画。

html5波浪线条,HTML5 svg炫酷波浪线条动画插件相关推荐

jQuery和SVG炫酷弹射纸飞机动画特效
http://demo.htmleaf.com/1506/201506261811/index.html jQuery和css3自动轮换的用户评论留言炫酷纯CSS3纸飞机动画特效
jQuery仿真翻书炫酷翻页动画插件
下载地址booklet的一款jQuery仿真杂志翻页动画插件,看起来很炫酷的翻书效果. dd:
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...
html图标动画效果,html5 svg炫酷图标变形动画特效
这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效.类似的效果有:html5 svg和css3超酷图标动画特效. 使用方法 1.添加一组SVG图标到你的HTML文件中. 2.通过调用new ...
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下今天我们来探索一下Carl Philipe Brenner的网站 ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
html 滤镜制作线条,PS滤镜简单制作炫酷的线条效果
今天为大家分享利用PS滤镜制作炫酷线条效果方法,教程很不错,值得大家学习,推荐过来,喜欢的朋友快快来学习吧! 步骤启动PS软件 ctrl+n新建一空白文档,尺寸为 800x600px,背景色设置为黑 ...
Canvas绘制炫酷的火焰风暴动画
今天给大家分享一个用Canvas写的火焰风暴动画,实现效果如下: 怎么样,场面是不是很壮观,下面是代码实现,欢迎大家复制粘贴和吐槽. <!DOCTYPE html> <html la ...

html5波浪线条,HTML5 svg炫酷波浪线条动画插件

html5波浪线条,HTML5 svg炫酷波浪线条动画插件相关推荐

最新文章

热门文章