首頁»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條評論
登錄會員中心
快乐彩票开奖号码 小金县| 甘德县| 灌南县| 浙江省| 观塘区| 宁德市| 武宣县| 铅山县| 吉首市| 马山县| 香河县| 冷水江市| 蓝田县| 滁州市| 景德镇市| 酉阳| 商洛市| 固原市| 同江市| 永和县| 富蕴县| 太仓市| 罗田县| 双牌县| 丁青县| 桦川县| 北宁市| 门头沟区| 察雅县| 都匀市| 泸水县| 循化| 徐州市| 襄城县| 星子县| 驻马店市| 乌恰县| 高邮市| 齐齐哈尔市| 三穗县| 平果县| 太仆寺旗| 即墨市| 垣曲县| 平遥县| 荣成市| 讷河市| 原阳县| 横山县| 东安县| 黔东| 翼城县| 天镇县| 锡林浩特市| 枝江市| 闽侯县| 义马市| 和林格尔县| 永新县| 林周县| 钟山县| 文山县| 太和县| 龙江县| 陵水| 乐清市| 开化县| 大同市| 静海县| 汝州市| 中超| 庆安县| 南召县| 新丰县| 富源县| 称多县| 尼玛县| 夹江县| 富源县| 汉阴县| 白玉县| 铜山县| 金溪县| 彩票| 昭平县| 大姚县| 巴林右旗| 徐汇区| 石嘴山市| 罗城| 连南| 荥经县| 莱阳市| 宜宾市| 民权县| 博兴县| 岑溪市| 阿克苏市| 惠州市| 四平市| 河东区| 象山县| 宁波市| 泰来县| 阳城县| 凉城县| 兰州市| 海林市| 师宗县| 普兰店市| 茂名市| 成都市| 阿鲁科尔沁旗| 甘谷县| 武隆县| 嫩江县| 旬邑县| 高邮市| 门头沟区| 濉溪县| 平阳县| 宁海县| 平和县| 和政县| 东丰县| 襄汾县| 天台县| 开化县| 高雄市| 如皋市| 沁水县| 措勤县| 新龙县| 江陵县| 镇原县| 丹江口市| 沿河|