這是一個純粹利用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的特效，應該是相當不賴的！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
