CSS零元素构建细胞变形动画

使用css filter drop-shadow / box-shadow / border-radius 组合构建的不规则元素边界。

css, border

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1249
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	align-items: center;
	background-image: linear-gradient(45deg, pink, hotpink);
	display: flex;
	height: 100vh;
	overflow: hidden;
	justify-content: center;
}

body::before {
	animation: anim 30s infinite;
	background-image: linear-gradient(135deg, slateblue, HotPink);
	border-radius: 30% 70% 53% 47% / 26% 46% 54% 74%;
	box-shadow: 0 -2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset,
		0 -2vmin 7vmin purple inset;
	content: "";
	display: inline-block;
	filter: drop-shadow(0 0 3vmin Thistle) drop-shadow(0 5vmin 4vmin Orchid)
		drop-shadow(2vmin -2vmin 15vmin MediumSlateBlue)
		drop-shadow(0 0 7vmin MediumOrchid);
	height: 50vmin;
	position: relative;
	top: 0;
	width: 50vmin;
}

@keyframes anim {
	0%,
	100% {
		border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
		box-shadow: 0 -2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset,
			0 -2vmin 7vmin purple inset;
	}

10% {
		border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
	}

20% {
		border-radius: 67% 33% 47% 53% / 37% 20% 80% 63%;
	}

30% {
		border-radius: 39% 61% 47% 53% / 37% 40% 60% 63%;
		box-shadow: -1vmin -2vmin 3vmin LightPink inset,
			-1vmin -2vmin 4vmin MediumPurple inset, 1vmin -1vmin 7vmin purple inset;
	}

40% {
		border-radius: 39% 61% 82% 18% / 74% 40% 60% 26%;
	}

50% {
		border-radius: 100%;
		box-shadow: 0 2vmin 3vmin LightPink inset, 0 1vmin 4vmin MediumPurple inset,
			0 2vmin 7vmin purple inset;
	}

60% {
		border-radius: 50% 50% 53% 47% / 72% 69% 31% 28%;
	}

70% {
		border-radius: 50% 50% 53% 47% / 26% 22% 78% 74%;
		box-shadow: 1vmin 1vmin 4vmin LightPink inset,
			2vmin -1vmin 4vmin MediumPurple inset, -1vmin -1vmin 5vmin purple inset;
	}

80% {
		border-radius: 50% 50% 53% 47% / 26% 69% 31% 74%;
	}

90% {
		border-radius: 20% 80% 20% 80% / 20% 80% 20% 80%;
	}
}

HTML

使用css filter drop-shadow / box-shadow / border-radius 组合构建的不规则元素边界。

css, border

编辑器支持Emmet

快捷键

使用css filter drop-shadow / box-shadow / border-radius 组合构建的不规则元素边界。

css, border

17个单元素构建的汉堡菜单（含点击交互变形动画）

你的益达 - 单元素纯CSS实现的粘稠变形动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：