首頁»HTML/CSS»CSS實現兩個球相交的粘粘效果

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

來源:果凍 發布時間:2019-05-18 閱讀次數:

  這是一個純粹利用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的特效,應該是相當不賴的!

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
CSS
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
湖北快3今天的开奖结果