Html/CSS动画效果个人练习（11）

最新推荐文章于 2024-05-15 09:52:04 发布

迷人滴巷子哥

最新推荐文章于 2024-05-15 09:52:04 发布

阅读量258

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css3 css html jquery

本文链接：https://blog.youkuaiyun.com/weixin_47445023/article/details/106008995

博客展示了作者在CSS动画效果上的个人练习，内容包括HTML源码、CSS样式和JQuery实现，呈现了第11天的练习成果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,Float32Array