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. redis-Hash(哈希表)

    Redis hash 是一个string类型的field和value的映射表,它的添加.删除操作都是O(1)(平均).hash特别适用于存储对象,将一个对象存储在hash类型中会占用更少的内存,并且可 ...

  2. sklearn的train_test_split()各函数参数含义解释（非常全）

    sklearn之train_test_split()函数各参数含义(非常全) 在机器学习中,我们通常将原始数据按照比例分割为“测试集”和“训练集”,从 sklearn.model_selection ...

  3. 三 PrePareStatement注入，DELETE和TRUNCATE

    PreparedStatement PreparedStatement是一个接口,它继承了Statement,该接口有以下几个优点: 性能比Statement高,会把sql预编译 可以解决sql注入问 ...

  4. 无需重新编译安装PHP扩展的方法

    转自:https://www.jianshu.com/p/ae3c17b0f126 PHP扩展模块通常有两种: PHP官方扩展.如果php通过源码安装(php7),安装的时候未开启,而后来需要开启某个 ...

  5. 查看 Secret【转】

    可以通过 kubectl get secret 查看存在的 secret. 显示有两个数据条目,kubectl describe secret 查看条目的 Key: 如果还想查看 Value,可以用  ...

  6. 有没有比NRF51822更好的智能穿戴蓝牙方案

    现在在智能穿戴领域市场不断的追求低功耗.低成本的蓝牙芯片.蓝牙芯片目前除了Dialog公司研制蓝牙芯片是最求超低功耗的但是对于其它性能上还比较满足不了其它领域的功能,另外NORDIC.TI的蓝牙芯片虽 ...

  7. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 的解决办法

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS ...

  8. xilinx FPGA课程学习总结

    一时冲动,跑步进入了FPGA的大门,尤老师是教练,我之前一直做嵌入式软件,数字电路也是十年前大学课堂学过,早已经还给老师了.FPGA对于我来说完全是小白,所以.老师的课程,对于我来说至关重要!因为见过 ...

  9. 018、Java中除法的是用，解决除法计算精度问题

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  10. 007.Oracle数据库 , 使用%进行模糊查询

    /*Oracle数据库查询日期在两者之间*/ SELECT PKID, OCCUR_DATE, ATA FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date ...