Day24 CSS 相融黏滯效果

今天我們要來做這個紓壓的效果：

https://codepen.io/elvismao/pen/poqqoLr

然後你可以應用做出一些很酷的效果：

原理

原理其實很簡單。要讓兩個東西之間相連只需要模糊就會糊在一起了。

HTML

<div class="box">	<div class="circle-small"></div>	<div class="circle-big"></div></div>

CSS

.box {	position: relative;	height: 100vh;	background-color: #fff;}.circle-big,.circle-small {	filter: blur(10px);	border-radius: 50%;	width: 80px;	height: 80px;	background-color: red;	position: absolute;	left: 50%;	top: 50%;	transform: translate(-50%, -50%);}.circle-big {	width: 100px;	height: 100px;	background-color: black;	transform: translate(0, -50%);}

然後增加對比讓中間模糊的部分更明顯：

CSS

.box {	position: relative;	height: 100vh;	background-color: #fff;	filter: contrast(20);}

最後讓它動起來

CSS

.box {	position: relative;	height: 500px;	filter: contrast(20);	background-color: #fff;}.circle-big,.circle-small {	border-radius: 50%;	filter: blur(10px);	animation: 2s infinite move alternate;	width: 80px;	height: 80px;	background-color: red;	transform: translatex(20px);	position: absolute;	left: 50%;	top: 50%;	transform: translate(-50%, -50%);}.circle-big {	width: 100px;	height: 100px;	background-color: black;	animation-delay: -2s;}@keyframes move {	from {		transform: translate(calc(-50% + 100px), -50%);	}	to {		transform: translate(calc(-50% - 100px), -50%);	}}