HTML+CSS+jquery代码实例：水波纹效果与纯HTML CSS和jquery（拿来就能用）

南北极之间

已于 2022-06-24 18:27:25 修改

阅读量339

点赞数

分类专栏：前端工具代码前端开发文章标签： javascript 前端 html

于 2022-06-24 18:27:17 首次发布

本文链接：https://blog.csdn.net/qq_22182989/article/details/125450537

版权

前端开发同时被 2 个专栏收录

587 篇文章 56 订阅

订阅专栏

前端工具代码

15 篇文章 1 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript，特别是jQuery与Ripples.js库，来实现一个全屏背景图片的涟漪效果。通过引入jQuery和Ripples.js的CDN链接，然后在文档加载完成后应用Ripples.js插件，可以为页面的全屏背景图片添加动态交互体验。

摘要由CSDN通过智能技术生成

效果：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js">
</script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<script>
$(document).ready(function(){
$(".full-landing-image").ripples({
  resolution: 200,
  perturbance: 0.04,
});
});
</script>
		<style>
		.full-landing-image
{
  width: 100%;
  height: 100vh;
  background: url(https://img.tukuppt.com/png_preview/00/11/21/QavTHpmzY6.jpg!/fw/780) no-repeat center;
  background-size: cover;
}
	</style>
</head>
<body>
<div class="full-landing-image"></div>
</body>
</html>

关注博主即可阅读全文