Day24 CSS 相融黏滯效果

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

https://codepen.io/edit-mr/pen/poqqoLr

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

原理

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

                1<div class="box">
2    <div class="circle-small"></div>
3    <div class="circle-big"></div>
4</div>
            

                1.box {
  position: relative;
  height: 100vh;
  background-color: #fff;
5}
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%);
17}
circle-big {
  width: 100px;
  height: 100px;
  background-color: black;
  transform: translate(0, -50%);
23}
            

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

                1.box {
2    position: relative;
3    height: 100vh;
4    background-color: #fff;
5    filter: contrast(20);
6}
            

最後讓它動起來

                1.box {
  position: relative;
  height: 500px;
  filter: contrast(20);
  background-color: #fff;
6}
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%);
20}
circle-big {
  width: 100px;
  height: 100px;
  background-color: black;
  animation-delay: -2s;
26}
27
28@keyframes move {
  from {
      transform: translate(calc(-50% + 100px), -50%);
  }
  to {
      transform: translate(calc(-50% - 100px), -50%);
  }
35}
            