纯CSS液态形状动画

2018-10-24 0 1997 0

看到一个描边圆角工具，突发灵感写一个液态动画效果

具体原理是通过css的圆角和旋转来实现，很简单

效果图：

CSS代码：

	div{width:300px; height: 300px; background-color: #000; opacity: 0.6; margin:100px auto; transition: 1s all linear; animation: 5s horn linear infinite;}
	@keyframes horn{
		0%{ border-radius:53% 47% 43% 57% / 58% 57% 43% 42% ; transform: rotate(0deg);}
		20%{border-radius:44% 56% 63% 37% / 40% 49% 51% 60%; }
		40%{border-radius:61% 39% 45% 55% / 27% 57% 43% 73% ;}
		60%{border-radius:45% 55% 47% 53% / 51% 44% 56% 49% ;}
		80%{border-radius:66% 34% 42% 58% / 51% 61% 39% 49% ;}
		100%{border-radius:53% 47% 43% 57% / 58% 57% 43% 42% ; transform: rotate(360deg);}

	}