canvas+webgl模拟带声音水流动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas+webgl模拟带声音水流动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
:root {
	--clr-fg: #ffffff99;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100vh;
	overflow: hidden;
	background: repeating-radial-gradient(
		circle at center,
		#444 0 10%,
		#111 10% 20%
	);
	touch-action: none;
}

canvas {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.control {
	display: grid;
	place-content: center;
	position: absolute;
	width: 200px;
	height: 200px;
	inset: 0;
	margin: auto;
}

.control_label {
	opacity: 0;
	display: grid;
	place-content: center;
	transition: opacity 1200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.control.initial .control_label {
	opacity: 1;
}

.control:hover .control_label {
	opacity: 1;
}

.control_display,
.control_input {
	grid-row: 1/-1;
	grid-column: 1/-1;
	position: relative;
	cursor: pointer;
}

.control_display {
	display: grid;
	place-content: center;
	font-size: 0.825em;
	font-weight: 500;
}

.control_display svg {
	--duration: 50ms;
	display: inline-block;
	stroke-linejoin: round;
	stroke-width: 2px;
	fill: var(--clr-fg);
	transition: var(--duration);
	transform: scale(1.1);
}

.control_display svg .speaker-vol {
	stroke-linecap: round;
}

.control_display svg .speaker-on {
	fill: none;
	stroke: none;
	opacity: 0;
	transition: opacity var(--duration);
}

.control_label:has([type="checkbox"]:checked) svg .speaker-on {
	opacity: 1;
	fill: var(--clr-fg);
}

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	position: relative;
	margin: 0;
	width: 6em;
	height: 6em;
	transform: scale(1);
	font: inherit;
	color: currentColor;
	border-width: 0.15rem;
	border-style: solid;
	border-radius: 50%;
	border-color: var(--clr-fg);
	display: grid;
	place-content: center;
	background: #11111199;
	box-shadow: 0px 0px 12px 0 #a5a5a5;
}

input[type="checkbox"]:hover {
	transform: scale(1.1);
	transition: 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

input[type="checkbox"]:is(:checked, :active),
input[type="checkbox"]:is(:checked, :active) + .control_display svg {
	transform: scale(1);
}

input[type="checkbox"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 2px 20px 2px #6fa3fa;
	opacity: 0;
	transform: scale(0.95);
	transition: 400ms;
}

input[type="checkbox"]:hover::after {
	transform: scale(1.05);
	opacity: 1;
}
</style>


  
  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
<div class="control initial">
	<label class="control_label">
		<input type="checkbox" class="control_input" name="vol" id="play" />
		<div class="control_display">
			<svg viewBox="0 0 60 60" width="60" height="60">
				<path class="speaker-cone" d="
            M5 25
            Q10 25
            30 5
            L30 55
            Q10 35
            5 35
            Z 
            " />
				<path class="speaker-vol" d="
            M35 25
            A 5 5 0 0 1 35 35
            " />
				<path class="speaker-vol speaker-on" d="
            M35 15
            A 5 5 0 0 1 35 45
            " />
			</svg>
		</div>
	</label>
</div>

      <script >
/*********
 * made by Matthias Hurrle (@atzedent)
 */

/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext("webgl2");
const dpr = Math.max(1, 0.5 * window.devicePixelRatio);

const vertexSource = `#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

in vec2 position;

void main(void) {
    gl_Position = vec4(position, 0., 1.);
}
`;
const fragmentSource = `#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 fragColor;

uniform vec2 resolution;
uniform float time;

#define T time
#define S smoothstep
#define hue(a) (.24+.4*cos(10.3*(a)+vec3(0,83,21)))

float rnd(vec2 p) {
  return fract(
    sin(
      dot(
        p,
        vec2(12.342165, 78.39911)
      )
    )*78.57137
  );
}

float noise(vec2 p) {
  vec2 f = fract(p),
  .........完整代码请登录后点击上方下载按钮下载查看