以复选框为中心产生波浪式动画效果

只需要引入一个id为lanren的div，外加js以及css即可实现这种效果,当然，css3的效果，低版本浏览器下无法实现,尽可能少的代码，方便使用的html css js,才是我们追求的极致!

前言: (写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.

说明:可以在复选框的任意点击都会出现效果!

废话不多说,先上效果.

波浪式动画.gif

首先定义一个id为lanren的div.

第二css也非常简单,自定义一个动画,详情请继续向下看∨

 .wrapper{ overflow:hidden; margin:0 auto; position:relative;}
 .wrapper input{position:absolute}
 .wrapper input.grow{-webkit-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);-moz-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275)}
 @-webkit-keyframes grow{
 0%{-webkit-transform:scale(1)}
 30%{-webkit-transform:scale(2.5)}
 100%{-webkit-transform:scale(1)}
 }
 @-moz-keyframes grow{
 0%{-moz-transform:scale(1)}
 30%{-moz-transform:scale(2.5)}
 100%{-moz-transform:scale(1)}
 }
 @keyframes grow{
 0%{transform:scale(1)}
 30%{transform:scale(2.5)}
 100%{transform:scale(1)}
 }
 

到了最重要的时候了,最核心的代码,先创建input复选框标签然后添加到div上,..详情请往下面看∨

笔没墨了!
欲知详情,下节再讲!!!