1，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ripples</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
</head>
<body>
<div class="full-landing-image"></div>
<script>
$('.full-landing-image').ripples({
resolution:200,
perturbance:0.04
})
</script>
</body>
</html>
 
2，style.css
 
body{
margin: 0;
padding: 0;
}
.full-landing-image{
width: 100%;
height: 100vh;
background: url(./hb.jpg) no-repeat;
background-size: cover;
}

jquery特效 - 网站水波纹的更多相关文章

  1. css3+jQuery实现按钮水波纹效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  3. WebGL——水波纹特效

    大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...

  4. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  5. Android5.0以上的项目都会有的按钮点击特效--水波纹

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  6. Android特效专辑（十一）——仿水波纹流量球进度条控制器，实现高端大气的主流特效

    Android特效专辑(十一)--仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 ...

  7. Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单

    Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推 ...

  8. Android特效专辑(一)——水波纹过渡特效(首页)

    Android特效专辑(一)--水波纹过渡特效(首页) 也是今天看到的一个特效,感觉挺漂亮的,最近也一直在筹划一个APP,就想把他当做APP的首页,然后加些处理,关于首页APP的特效等我完工了再贴出来 ...

  9. Android水波纹特效的简单实现

    我的开源页面指示器框架 MagicIndicator,各位一定不要错过哦. 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 &qu ...

随机推荐

  1. IDEA报 : Lombok Requires Annotation Processing

    Lombok Requires Annotation Processing Annotation processing seems to be disabled for the project &qu ...

  2. 「CF600E」Lomsat gelral

    传送门 Luogu 解题思路 线段树合并板子题(也可以 dsu on the tree) 好像没什么好讲的,就是要注意开 long long . 细节注意事项 咕咕咕 参考代码 #include &l ...

  3. Python 矩阵相关

    Python 中矩阵运算主要使用numpy库.NumPy的主要对象是同种元素的多维数组.这是一个所有的元素都是一种类型.通过一个正整数索引的元素表格(通常是元素是数字).因此对于随机查找来说,比pyt ...

  4. IdentityServer4专题之三：OAuth、SSO和OpenID

    一.oauth 典型案例:如果一个用户R拥有两项服务:一项服务是图片在线存储服务A,另一个是图片在线打印服务B.由于服务A与服务B是由两家不同的服务提供商提供的,所以用户在这两家服务提供商的网站上各自 ...

  5. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  6. SciPy 优化

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  7. python 中常见的异常类型汇总

    异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是输入^C) Exception 常规错误的基类 ...

  8. 在线关闭 CLOSE_WAIT状态TCP连接

    1.查看某个端口的所有TCP连接: [root@Centos projects]# netstat -anp | tcp6 ::: :::* LISTEN /java tcp6 CLOSE_WAIT ...

  9. 图像检索：CEDD（Color and Edge Directivity Descriptor）算法 颜色和边缘的方向性描述符

    颜色和边缘的方向性描述符(Color and Edge Directivity Descriptor,CEDD) 本文节选自论文<Android手机上图像分类技术的研究>. CEDD具有抽 ...

  10. BVS安全检测之检查Linux是否口令生存周期

    口令生存周期的配置文件为 /etc/login.defs vim 打开该文件,命令模式下输入 /PASS_MAX_DAYS 找到该配置信息的位置 我的Linux操作系统默认显示的是99999,说明我当 ...