CSS动画效果个人练习第十一天
Html源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>water</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section></section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="jquery.ripples-min.js"></script>
<script>
$(document).ready(function(){
$('section').ripples({
//imageUrl: null,
dropRadius: 10,
perturbance: 0.01,
resolution: 512,
//interactive: true,
//crossOrigin: "",
});
})
</script>
</body>
</html>
CSS源代码
body{
margin: 0;
padding: 0;
}
section{
background-image: url(../../u/html/timg94.jpg);
background-size: cover;
height: 100vh;
}
JQuery源代码
/**
* jQuery Ripples plugin v0.6.2 / https://github.com/sirxemic/jquery.ripples
* MIT License
* @author sirxemic / https://sirxemic.com/
*/
!function(e,t){
"object"==typeof exports&&"undefined"!=typeof module?t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):t(e.$)}(this,function(e){
"use strict";function t(e){
return"%"==e[e.length-1]}function r(e){
var t=e.split(" ");if(1!==t.length)return t.map(function(t){
switch(e){
case"center":return"50%";case"top":case"left":return"0";case"right":case"bottom":return"100%";default:return t}});switch(e){
case"center":return["50%","50%"];case"top":return["50%","0"];case"bottom":return["50%","100%"];case"left":return["0","50%"];case"right":return["100%","50%"];default:return[e,"50%"]}}function i(e,t,r){
function i(e,t){
var r=s.createShader(e);if(s.shaderSource(r,t),s.compileShader(r),!s.getShaderParameter(r,s.COMPILE_STATUS))throw new Error("compile error: "+s.getShaderInfoLog(r));return r}var o={
};if(o.id=s.createProgram(),s.attachShader(o.id,i(s.VERTEX_SHADER,e)),s.attachShader(o.id,i(s.FRAGMENT_SHADER,t)),s.linkProgram(o.id),!s.getProgramParameter(o.id,s.LINK_STATUS))throw new Error("link error: "+s.getProgramInfoLog(o.id));o.uniforms={
},o.locations={
},s.useProgram(o.id),s.enableVertexAttribArray(0);for(var n,a,u=/uniform (\w+) (\w+)/g,h=e+t;null!=(n=u.exec(h));)a=n[2],o.locations[a]=s.getUniformLocation(o.id,a);return o}function o(e,t){
s.activeTexture(s.TEXTURE0+(t||0)),s.bindTexture(s.TEXTURE_2D,e)}function n(e){
var t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function a(e){
return e.match(/^data:/)}var s,u=(e=e&&"default"in e?e.default:e)(window),h=function(){
function e(e,t,i){
var o="OES_texture_"+e,n=o+"_linear",a=n in r,s=[o];return a&&s.push(n),{
type:t,arrayType:i,linearSupport:a,extensions:s}}var t=document.createElement("canvas");if(!(s=t.getContext("webgl")||t.getContext("experimental-webgl")))return null;var r={
};if(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].forEach(function(e){
var t=s.getExtension(e);t&&(r[e]=t)}),!r.OES_texture_float)return null;var i=[];i.push(e("float",s.FLOAT