svg+css实现filter液态液体融合分离动画效果代码-html代码-BFW代码库

svg+css实现filter液态液体融合分离动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现filter液态液体融合分离动画效果代码

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

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

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


  
  
<style>
body { 
	background: oklch(94% 10% 2deg); 
	background-size: contain;
	margin: 0 auto;
	height: 90dvh;
	width: 90dvw;
	overflow: hidden;
}


.container {
	display: grid;
	align-content: center;
	justify-content: center;
	
	filter: url("#morph");
	
	margin: 3% auto;
	height: 100%;
	width: 100%;
}


.blob {	
	--min: 2rem;
	--d: clamp(var(--min), 8dvw, calc(var(--min) * 2));
	background: var(--bg, white);
	border-radius: 1dvw;
	height: var(--d);
	width: var(--d);
	
	filter: blur(10px);
	
	-webkit-animation-name: move;
	
	        animation-name: move;
	-webkit-animation-delay: var(--delay, 0s);
	        animation-delay: var(--delay, 0s);
	-webkit-animation-duration: var(--duration, 1.5s);
	        animation-duration: var(--duration, 1.5s);
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	
	&:nth-of-type(even) {
		margin-left: -25%;
	}
	
	/* white */
	&:nth-of-type(1) {
		/* --bg: oklch(80% 70% 40deg); */
		--min: 1.5rem;
	}
	
	/* orange */
	&:nth-of-type(2) {
		--bg: oklch(80% 70% 90deg);
		/* --min: 3rem; */
		--delay: 2s;
	}
	
	/* yellow */
	&:nth-of-type(3) {
		--bg: oklch(100% 50% 50deg);
		--min: 4rem;
		--delay: 1s;
	}
	
	/* green */
	&:nth-of-type(4) {
		--bg: oklch(80% 70% 12.........完整代码请登录后点击上方下载按钮下载查看