Day24 CSS 相融黏滯效果

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

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

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

原理

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

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

        .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%);
}
      

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

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

最後讓它動起來

        .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%);
    }
}
      