注错之当

JQuery水波效果

发布于 2020-02-15 268 次阅读

展示地址：http://show.cqdefxxx.com/Water%20Ripples%20Effect

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Water Ripples Effect</title>
        <link rel="stylesheet" href="style.css">
        <script src="jquery3.4.0.min.js"></script>
        <script src="jquery.ripples.min.js"></script>
	</head>
	<body>
        <div class="full-laning-image">
            
        </div>
        <script type="text/javascript">
            $(".full-laning-image").ripples({
              resolution: 200,
              perturbance: 0.04,               
            });
        </script>
	</body>
</html>

style.css

body{
    margin:0;
    padding: 0;
}

.full-laning-image{
    width:100%;
    height:100vh;
    background: url(447.png) no-repeat center;
    background-size: cover;
}