[007]-css实现变形虫

效果预览

https://codepen.io/strugglingBoy/pen/EdLReY

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/029-amoeba

代码解读

主要利用border-radius来实现变形虫外观的变化，背景的变化就使用background-position来实现

1.html代码

定义一个变形虫（amoeba）的容器，元素较少，你也可以不定义，直接用body::after

<div class="amoeba"></div>

2.css代码

因为要做背景的变化，所以需要用linear-gradient设置不同的背景色，90deg相当于是to right(从左到右)

.amoeba {
	width: 25vw;
	height: 42vw;
	background: linear-gradient( 90deg,
				#43e97b,
				#38f9d7,
				#e0c3fc,
				#8ec5fc,
				#4facfe,
				#00f2fe,
				#a8edea,
				#fed6e3);
	background-size: 1600% 1600%;
	animation: morph 10s ease-in-out infinite alternate,
	change 20s linear infinite alternate;
}

变形虫外观变形动画，利用border-radius来实现，/前面是x,后面是y,若是xy一样则只写/前面的，这里的xy也相当于svg里面的rect标签里的属性rx和ry

@keyframes morph {
	0%,
	100% {
		border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
	}
	20% {
		border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
	}
	40% {
		border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
	}
	60% {
		border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
	}
	80% {
		border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
	}
}

变形虫背景渐变动画，利用background-position来实现

@keyframes change {
	100% {
		background-position: 100% 50%;
	}
}

最后大功告成