Day24 CSS 相融黏滯效果

Oct 8, 2023 · 1 分鐘長 · HTML CSS JS ·

分享到:

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

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 {
 2  position: relative;
 3  height: 100vh;
 4  background-color: #fff;
 5}
 6.circle-big,
 7.circle-small {
 8  filter: blur(10px);
 9  border-radius: 50%;
10  width: 80px;
11  height: 80px;
12  background-color: red;
13  position: absolute;
14  left: 50%;
15  top: 50%;
16  transform: translate(-50%, -50%);
17}
18.circle-big {
19  width: 100px;
20  height: 100px;
21  background-color: black;
22    transform: translate(0, -50%);
23}

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

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

最後讓它動起來

 1.box {
 2  position: relative;
 3  height: 500px;
 4  filter: contrast(20);
 5  background-color: #fff;
 6}
 7.circle-big,
 8.circle-small {
 9  border-radius: 50%;
10  filter: blur(10px);
11  animation: 2s infinite move alternate;
12  width: 80px;
13  height: 80px;
14  background-color: red;
15  transform: translatex(20px);
16  position: absolute;
17  left: 50%;
18  top: 50%;
19  transform: translate(-50%, -50%);
20}
21.circle-big {
22  width: 100px;
23  height: 100px;
24  background-color: black;
25  animation-delay: -2s;
26}
27
28@keyframes move {
29  from {
30    transform: translate(calc(-50% + 100px), -50%);
31  }
32  to {
33    transform: translate(calc(-50% - 100px), -50%);
34  }
35}