首頁»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條評論
登錄會員中心
大发国际网址 五常市| 基隆市| 漳浦县| 苏州市| 辽中县| 甘南县| 科尔| 巨鹿县| 五寨县| 浦东新区| 韶关市| 宜川县| 马尔康县| 浮山县| 凉城县| 麻阳| 台山市| 澎湖县| 东方市| 丹阳市| 泌阳县| 同心县| 民和| 瑞丽市| 怀来县| 和顺县| 昌黎县| 梨树县| 翁牛特旗| 昭觉县| 扎兰屯市| 新兴县| 松桃| 怀仁县| 丰宁| 秭归县| 永泰县| 德惠市| 辉南县| 梅州市| 岳普湖县| 烟台市| 云梦县| 襄城县| 柘城县| 山东| 孙吴县| 海兴县| 察隅县| 常州市| 久治县| 阜新市| 唐山市| 兴安盟| 南川市| 东平县| 泊头市| 游戏| 博罗县| 巢湖市| 准格尔旗| 疏附县| 天等县| 巍山| 郁南县| 白银市| 咸丰县| 朝阳区| 滨海县| 务川| 吕梁市| 新平| 方山县| 麟游县| 昆山市| 霍林郭勒市| 凤阳县| 新闻| 海安县| 平山县| 包头市| 六枝特区| 武强县| 郸城县| 大方县| 灵璧县| 阳新县| 台前县| 松滋市| 扶风县| 阳春市| 崇文区| 新宾| 桐庐县| 江北区| 营口市| 梅州市| 登封市| 小金县| 桦甸市| 济阳县| 深州市| 共和县| 桦川县| 台湾省| 广宗县| 聊城市| 家居| 固原市| 湖北省| 新河县| 晋宁县| 长兴县| 赤壁市| 厦门市| 汕头市| 太康县| 襄汾县| 巴南区| 泸溪县| 南漳县| 沅江市| 阿荣旗| 包头市| 色达县| 昌江| 青岛市| 于田县| 资阳市| 壤塘县| 阿鲁科尔沁旗| 尼勒克县| 若尔盖县| 洞头县| 和田县| 博乐市| 新郑市|