CSS實現兩個球相交的粘粘效果

翻譯自 《CSS Sticky Ball》

這是一個純粹利用CSS所作出來的效果，這個效果說穿了就是一個圖像處理的原理，作法跟Photoshop裏頭的幾乎如出一轍，只是一個用圖層和色版來製做，一個則是用CSS（把div當成圖層思考就行了）。

從PhotoShop開始

一開始咱們來玩Photoshop，會比直接寫CSS來得容易理解（沒有Photoshop的人也不要緊，看完說明也就懂了），首先咱們新增兩個圖層，一個裏頭放上紅色的小球，另一個裏頭放上黑色的大球。

接着咱們使用高斯模糊的濾鏡，分別把小紅球和大黑球模糊。

再來咱們新增一個「亮度與對比」的調整圖層，勾選使用舊版，而後把對比數值往上拉，你就會看到神奇的現象。

拉到邊緣再也不模糊以後，你就能夠用鼠標嘗試着把紅球移動，就會發現紅球與黑球交界的地方變成粘粘的效果心，這就是咱們要作的效果！

就這樣，你已經知道如何用Photoshop來製做，同理，CSS也是用一樣的方法，只是把圖層換成了div而已，就這麼簡單。

CSS效果

首先我在HTML裏頭，放上一個class爲redball的div看成紅球，class爲blackball的是黑球，這就是剛剛在PhotoShop裏頭的兩個圖層，接着在最外圍放上一個class爲effect的div，這就是咱們的調整圖層，完成後HTML代碼的長相應該是這樣：

<div class="effect">
  <div class="blackball"></div>
  <div class="redball"></div>
</div>複製代碼

只要對blackball和redball加入模糊的濾鏡，對effect加入對比的濾鏡，就可以達到Photoshop裏面的特效，而模糊的濾鏡必須使用filter:blur（數值），對比則使用filter:contrast（數值）。

CSS的長相會長這樣：

.effect{
  width:100%;
  height:100%;
  padding-top:50px;
  filter:contrast(10);
  background:#fff;
}
.blackball{
  width:100px;
  height:100px;
  background:black;
  padding:10px;
  border-radius:50%;
  margin:0 auto;
  z-index:1;
  filter:blur(5px);
}
.redball{
  width:60px;
  height:60px;
  background:#f00;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:70px;
  left:50px;
  z-index:2;
  filter:blur(5px) ;
  animation:rball 6s infinite;
}複製代碼

忽略CSS裏頭那些定位數值，裏頭blur的數值設爲5px，contrast的數值設爲10，就能夠看到紅求黑球粘在一塊兒了，至於該怎麼讓他們動起來呢？就要使用CSS3的animation，animation的程序以下：

@keyframes rball{
  0%,100%{
    left:35px;
    width:60px;
    height:60px;
  }
  4%,54%{
    width:60px;
    height:60px;
  }
  10%,60%{
    width:50px;
    height:70px;
  }
  20%,70%{
    width:60px;
    height:60px;
  }
  34%,90%{
    width:70px;
    height:50px;
  }
  41%{
    width:60px;
    height:60px;
  }
  50%{
    left:calc(100% - 95px);
    width:60px;
    height:60px;
  }
}複製代碼

這裏的keyframe寫了不少，由於要讓紅球進入黑球時，水平方向會被壓縮一下，而後再離開黑球的時候，水平方向會被拉長，如此一來纔會更像有粘性的感受，爲了測試這個效果，可真是煞費個人苦心呀！（不過這裏有個要注意的地方，因爲位置上會自動去計算，因此要測試的話，最外層的effect寬度記得設爲320px）

完成紅球以後，要讓兩顆藍色球合在一塊兒再分開，也是一樣的原理，下方列出兩顆藍色球的CSS，比較須要注意的地方是我讓藍色球合體以後會變大一些，分開的時候也會拉長。

.blueball1{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:0;
  z-index:2;
  filter:blur(8px) ;
  animation:bball1 6s infinite;
}
.blueball2{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:240px;
  z-index:2;
  filter:blur(8px) ;
  animation:bball2 6s infinite;
}
@keyframes bball1{
  0%,100%{
    left:0;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:75px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    top:215px;
    left:110px;
    width:110px;
    height:110px;
  }
}
@keyframes bball2{
  0%,100%{
    left:240px;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:165px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    left:110px;
    top:215px;
    width:110px;
    height:110px;
  }
}複製代碼

就這樣，單純利用CSS就完成了一個粘粘的效果，坦白說我也不太清楚這個效果能夠用在哪裏，不過若是用在水底世界或一些loading的特效，應該是至關不賴的！