CSS 噁心黏黏球效果

這篇教學會運用進行視覺設計時的影像原理，將不同的元素套用模糊濾鏡，搭配調整整體的對比度，實現有趣的噁心黏黏球效果。

快速導覽：

• 黏黏球效果的影像原理
• 實作噁心黏黏球
• 兩顆黏黏球合體

黏黏球效果的影像原理

開啟具有圖層功能的影像處理軟體，建立紅球和黑球的圖層，並將紅球與黑球「套用模糊濾鏡」，這時如果修改整體的「對比度」，會發現模糊的邊緣變成不模糊，而模糊交接處也變成了類似「沾黏」的效果。

使用滑鼠拖拉紅球圖層，就會出現噁心黏黏球的感覺，這也是接下來要使用 CSS 模擬的效果。

實作噁心黏黏球

根據上述影像處理軟體的實作過程，先在 HTML 裡建立一個 div 包覆兩個 div 的元素架構，模擬群組中有兩個圖層的狀況，接著將父元素套用對比度「contrast」濾鏡，子元素套用模糊「blur」濾鏡，最後搭配動畫效果，就能做出噁心黏黏球效果，但需要注意因為對比度改變會影響顏色的表現，部分顏色將會無法顯示。

參考：CSS 影像濾鏡 filter、CSS 動畫 animation

線上展示：https://codepen.io/oxxo/pen/bNGNZXJ

<!-- HTML 程式碼 -->
<div class="effect">
  <div class="black"></div>
  <div class="red"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .effect{
    position: relative;    /* 讓子元素可以進行絕對定位 */
    margin: 20px;
    width: 250px;
    height: 200px;
    background: white;     /* 背景白色，套用對比時才有效果 */
    overflow: hidden;      /* 因為模糊程度有可能會超出邊界，隱藏超出邊界部分 */
    filter: contrast(100); /* 調整對比 */
  }
  .red, .black {
    position:absolute;     /* 絕對定位 */
    border-radius: 50%;    /* 變成圓形 */
    filter: blur(5px);     /* 套用模糊 */
  }
  .black {
    z-index: 1;
    top: 50px;
    left: 75px;
    width: 100px;
    height: 100px;
    background: black;
  }
  .red {
    z-index: 2;
    top: 75px;
    left: 0;
    width: 50px;
    height: 50px;
    background: red;
    animation: oxxo 3s infinite alternate ease-in-out; /* 套用動畫 */
  }
  @keyframes oxxo {
    0%{left: 0;}
    100%{left: 200px;}
  }
</style>

兩顆黏黏球合體

如果撰寫更多 CSS 的動畫細節，也能做出更逼真的黏黏球，下方的範例會透過一系列的動畫。

參考：背景圖片 ( 定位、定位點、尺寸 )、CSS 動畫 animation

線上展示：https://codepen.io/oxxo/pen/XJWJQrj

<!-- HTML 程式碼 -->
<div class="effect">
  <div class="b1"></div>
  <div class="b2"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .effect{
    position: relative;
    margin: 20px;
    width: 400px;
    height: 200px;
    background: white;
    overflow: hidden;
    filter: contrast(100);
  }
  .b1, .b2 {
    position:absolute;
    border-radius: 50%;
    filter: blur(5px);
    width: 100px;
    height: 100px;
    background: blue;
    top: 50px;
  }
  .b1 {
    left: 0;
    animation: oxxo1 6s infinite;
  }
  .b2 {
    left: 300px;
    animation: oxxo2 6s infinite;
  }

  @keyframes oxxo1 {
    0% {
      left: 0;
    }
    20% {
      top: 50px;
      width: 100px;
      height: 100px;
    }
    50% {
      top: 25px;
      left: 125px;
      width: 150px;
      height: 150px;
    }
    85% {
      top: 60px;
      left: 50px;
      width: 150px;
      height: 80px;
    }
    90% {
      width: 75px;
      height: 100px;
    }
  }

  @keyframes oxxo2 {
    0% {
      left: 300px;
    }
    20% {
      top: 50px;
      width: 100px;
      height: 100px;
    }
    50% {
      top: 25px;
      left: 125px;
      width: 150px;
      height: 150px;
    }
    85% {
      top: 60px;
      left: 200px;
      width: 150px;
      height: 80px;
    }
    90% {
      width: 75px;
      height: 100px;
    }
  }
</style>

小結

透過 CSS 的濾鏡和動畫，有時也能做出一些有趣的效果，雖然這些效果的用途不多，但也不失為練習 CSS 特效的好方法。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～