恶心黏黏球效果

这篇教学会运用进行视觉设计时的图像原理，将不同的元素套用模糊滤镜，搭配调整整体的对比度，实现有趣的恶心黏黏球效果。

快速导览：

• 黏黏球效果的图像原理
• 实作恶心黏黏球
• 两颗黏黏球合体

黏黏球效果的图像原理

打开具有图层功能的图像处理软件，建立红球和黑球的图层，并将红球与黑球“套用模糊滤镜”，这时如果修改整体的“对比度”，会发现模糊的边缘变成不模糊，而模糊交接处也变成了类似“沾黏”的效果。

使用鼠标拖拉红球图层，就会出现恶心黏黏球的感觉，这也是接下来要使用 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 特效的好方法。

意见反馈