google水波按钮效果

因为用到了sass,所以先安装sass。

http://www.cnblogs.com/morong/p/4329957.html

这篇博客将安装过程和使用方法介绍的很清楚。

简单来说,就是sass需要依赖ruby环境,因此先去ruby官网下载文件安装,安装时记得勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。

然后点击电脑的开始菜单,点击Start Command Prompt with Ruby,在命令行里面依次输入如下命令(此法为淘宝镜像):

google水波按钮效果

安装完毕即可,上面提到的博客写的很详细,看不懂的可以去看。

看一下目录结构:

google水波按钮效果

css文件夹下面的style.css是通过命令生成的。

新建style.scss文件,按照语法规则编写完毕后,进入项目文件夹,输入sass style.scss style.css

google水波按钮效果

index.html

google水波按钮效果

style.scss

google水波按钮效果

style.css(此文件为命令编译生成,不是手写)

google水波按钮效果

main.js(为重复利用,封装成插件)

google水波按钮效果

效果图:

google水波按钮效果