simplex-noise实现可调节参数图片水面波动镜像效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：simplex-noise实现可调节参数图片水面波动镜像效果代码

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

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

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

  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
  
  
  
<style>
:root {
	--dark-color-h: 334.29;
	--dark-color-s: 32.03%;
	--dark-color-l: 30%;
	--light-color-h: 19.2;
	--light-color-s: 30.86%;
	--light-color-l: 84.12%;
	--dark-color: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		var(--dark-color-l)
	);
	--dark-color-lighter: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) + 10%)
	);
	--dark-color-darker: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) - 10%)
	);
	--dark-color-translucent: hsla(
		var(--dark-color-h),
		var(--dark-color-s),
		var(--dark-color-l),
		0.75
	);
	--dark-color-darker-translucent: hsla(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) - 10%),
		0.75
	);
	--light-color: hsl(
		var(--light-color-h),
		var(--light-color-s),
		var(--light-color-l)
	);
	--light-color-lighter: hsl(
		var(--light-color-h),
		var(--light-color-s),
		calc(var(--light-color-l) + 10%)
	);
	--light-color-darker: hsl(
		var(--light-color-h),
		var(--light-color-s),
		calc(var(--light-color-l) - 10%)
	);
	--light-color-translucent: hsla(
		var(--light-color-h),
		var(--light-color-s),
		var(--light-color-l),
		0.75
	);
	--color-bg: var(--dark-color);
	--color-text: var(--light-color);
	--resources-bg-color: var(--dark-color-darker-translucent);
	--resources-active-color: color-mix(
		in srgb,
		var(--light-color) 75%,
		transparent
	);
	--resources-color: var(--color-text);
	--canvas-offset: 4rem;
	--max-canvas-width: 52.5rem;
	--max-canvas-height: 52.5rem;
	--tp-base-background-color: #432331;
	--tp-base-shadow-color: #432331;
	--tp-button-background-color: #e3d2ca;
	--tp-button-background-color-active: #f5eeeb;
	--tp-button-background-color-focus: #ece0db;
	--tp-button-background-color-hover: #e3d2ca;
	--tp-button-foreground-color: #432331;
	--tp-container-background-color: #533540;
	--tp-container-background-color-active: #6b4f57;
	--tp-container-background-color-focus: #634650;
	--tp-container-background-color-hover: #5b3d48;
	--tp-container-foreground-color: #e3d2ca;
	--tp-groove-foreground-color: #533540;
	--tp-input-background-color: #533540;
	--tp-input-background-color-active: #6b4f57;
	--tp-input-background-color-focus: #634650;
	--tp-input-background-color-hover: #5b3d48;
	--tp-input-foreground-color: #e3d2ca;
	--tp-label-foreground-color: #b39e9c;
	--tp-monitor-background-color: #381d29;
	--tp-monitor-foreground-color: #b39e9c;
}

*,
::after,
::before {
	border-style: solid;
	border-width: 0;
	box-sizing: border-box;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	align-items: center;
	background: var(--color-bg);
	color: var(--color-text);
	display: grid;
	font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
		Arial, sans-serif;
	justify-items: center;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
	place-items: center;
	width: 100%;
}

canvas {
	--border-radius: clamp(0.5rem, 1.5vh, 1.5rem);
	background: var(--dark-color-darker-translucent);
	border-radius: var(--border-radius);
	box-shadow: 0 0.125rem 0.25rem var(--dark-color-darker-translucent);
	display: block;
	height: calc(min(100dvw, 100dvh) - var(--canvas-offset));
	max-block-size: var(--max-canvas-height);
	max-inline-size: var(--max-canvas-width);
	pointer-events: none;
	position: relative;
	width: calc(min(100dvw, 100dvh) - var(--canvas-offset));
	width: calc(
		min(100dvw, 100dvh) - var(--canvas-offset) - env(safe-area-inset-bottom)
	);
}

.tp-dfwv {
	padding: 0 0 3rem;
}

.tp-fldv:not(.tp-fldv-expanded) > .tp-fldv_c {
	opacity: 0 !important;
}

.tp-lblv_l {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.tp-fldv.tp-fldv-expanded > .tp-fldv_c {
	opacity: 1 !important;
	transition-delay: 0s, 0.2s !important;
	transition-duration: 0.2s, 0.2s !important;
	transition-property: height, opacity !important;
}

.tp-fldv_c:has(.tp-demo-thumbnails) {
	margin-left: 0.25rem;
	padding-left: 0;
}

.tp-demo-thumbnails {
	display: grid;
	gap: 0.1875rem;
	grid-gap: 0.1875rem;
	grid-template-columns: repeat(4, 1fr);
	padding: 0 0.25rem 0.0625rem;
	width: 100%;
}

.tp-demo-thumbnail {
	align-items: center;
	aspect-ratio: 1;
	background-color: var(--cnt-bg);
	border-radius: 0.........完整代码请登录后点击上方下载按钮下载查看