css实现水滴融合效果

yizheng_zeng

已于 2023-09-01 11:18:51 修改

阅读量224

点赞数

分类专栏： css 文章标签： css 前端

于 2023-09-01 11:13:35 首次发布

本文链接：https://blog.csdn.net/yizheng_zeng/article/details/132620166

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
	<header>
		<meta charset="UTF-8">
		<style>
			.parent {
				width: 1320px;
				height: 600px;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				filter: contrast(50);
			}
			.child1,.child2 {
				width: 200px;
				height: 200px;
				background-color: #def515;
				float: left;
				border-radius: 50%;
				filter: blur(25px);
			}
			.child1 {
				animation: c1 0.8s ease-in-out infinite alternate;
			}
			.child2 {
				animation: c2 0.8s ease-in-out infinite alternate;
			}
			@keyframes c1 {
				from {transform: translateX(-30px);}
				to {transform: translateX(25px);}				
			}
			@keyframes c2 {
				from {transform: translateX(30px);}
				to {transform: translateX(-25px);}				
			}
		</style>
	</header>
	<body>
		<div class="parent">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>
</html>