jquery.waterrippleeffect模拟真实水面触碰涟漪水纹动画效果代码

代码语言:html

所属分类:动画

代码描述:jquery.waterrippleeffect模拟真实水面触碰涟漪水纹动画效果代码

代码标签: 水面 触碰 涟漪 水纹 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
   
<meta charset="UTF-8">
   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.waterrippleeffect.min.js"></script>
   
<style type="text/css">
        html
, body, div, span, applet, object, iframe,
        h1
, h2, h3, h4, h5, h6, p, blockquote, pre,
        a
, abbr, acronym, address, big, cite, code,
        del
, dfn, em, font, img, ins, kbd, q, s, samp,
        small
, strike, strong, sub, sup, tt, var,
        b
, u, i, center,
        dl
, dt, dd, ol, ul, li,
        fieldset
, form, label, legend,
        table
, caption, tbody, tfoot, thead, tr, th, td {
           
margin: 0;
           
padding: 0;
           
border: 0;
           
outline: 0;
           
font-size: 100%;
           
vertical-align: baseline;
           
/*background: transparent;*/
           
box-sizing: border-box;
       
}

        body
{}
       
.container {
           
width: 480px;
           
height: 480px;
           
margin: 20px auto;
           
position: relative;
       
}
       
.clear {
           
clear: both;
           
height: 0;
           
font-size: 0;
           
line-height: 0;
       
}
   
</style>
   
<script>

        $(document).ready(function() {

          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0