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

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

代码语言：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&quo.........完整代码请登录后点击上方下载按钮下载查看