這是一個純粹利用CSS所做出來的效果，這個效果說穿了就是一個圖像處理的原理，做法跟Photoshop裏頭的幾乎一模一樣，只是一個用圖層和色版來製作，一個則是用CSS（把div當成圖層思考就好了）。
從PhotoShop開始
一開始我們來玩Photoshop，會比直接寫CSS來得容易理解（沒有Photoshop的人也沒關係，看完說明也就懂了），首先我們新增兩個圖層，一個裏頭放上紅色的小球，另外一個裏頭放上黑色的大球。
接着我們使用高斯模糊的濾鏡，分別把小紅球和大黑球模糊。
再來我們新增一個“亮度與對比”的調整圖層，勾選使用舊版，然後把對比數值往上拉，你就會看到神奇的現象。
拉到邊緣不再模糊之後，你就可以用鼠標嘗試着把紅球移動，就會發現紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果！
就這樣，你已經知道如何用Photoshop來製作，同理，CSS也是用同樣的方法，只是把圖層換成了div而已，就這麼簡單。
CSS效果
首先我在HTML裏頭，放上一個class爲redball的div當作紅球，class爲blackball的是黑球，這就是剛剛在PhotoShop裏頭的兩個圖層，接着在最外圍放上一個class爲effect的div，這就是我們的調整圖層，完成後HTML代碼的長相應該是這樣：
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
<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，比較需要注意的地方是我讓藍色球合體之後會變大一些，分開的時候也會拉長。
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
.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的特效，應該是相當不賴的！