建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)如何使用純CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
目前累計(jì)服務(wù)客戶(hù)超過(guò)千家，積累了豐富的產(chǎn)品開(kāi)發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹(shù)立企業(yè)形象，為客戶(hù)提供做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)始終以務(wù)實(shí)、誠(chéng)信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過(guò)對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶(hù)形象的視覺(jué)傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶(hù)提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶(hù)，共同發(fā)展進(jìn)步。
這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說(shuō)穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個(gè)用圖層和色版來(lái)制作，一個(gè)則是用CSS（把div當(dāng)成圖層思考就好了）。
從PhotoShop開(kāi)始
一開(kāi)始我們來(lái)玩Photoshop，會(huì)比直接寫(xiě)CSS來(lái)得容易理解（沒(méi)有Photoshop的人也沒(méi)關(guān)系，看完說(shuō)明也就懂了），首先我們新增兩個(gè)圖層，一個(gè)里頭放上紅色的小球，另外一個(gè)里頭放上黑色的大球。
接著我們使用高斯模糊的濾鏡，分別把小紅球和大黑球模糊。
再來(lái)我們新增一個(gè)“亮度與對(duì)比”的調(diào)整圖層，勾選使用舊版，然后把對(duì)比數(shù)值往上拉，你就會(huì)看到神奇的現(xiàn)象。
拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果！
就這樣，你已經(jīng)知道如何用Photoshop來(lái)制作，同理，CSS也是用同樣的方法，只是把圖層換成了div而已，就這么簡(jiǎn)單。
CSS效果
首先我在HTML里頭，放上一個(gè)class為redball的div當(dāng)作紅球，class為blackball的是黑球，這就是剛剛在PhotoShop里頭的兩個(gè)圖層，接著在最外圍放上一個(gè)class為effect的div，這就是我們的調(diào)整圖層，完成后HTML代碼的長(zhǎng)相應(yīng)該是這樣：
只要對(duì)blackball和redball加入模糊的濾鏡，對(duì)effect加入對(duì)比的濾鏡，就能夠達(dá)到Photoshop里面的特效，而模糊的濾鏡必須使用filter:blur（數(shù)值），對(duì)比則使用filter:contrast（數(shù)值）。
CSS的長(zhǎng)相會(huì)長(zhǎng)這樣：
.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里頭那些定位數(shù)值，里頭blur的數(shù)值設(shè)為5px，contrast的數(shù)值設(shè)為10，就可以看到紅求黑球粘在一起了，至于該怎么讓他們動(dòng)起來(lái)呢？就要使用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寫(xiě)了很多，因?yàn)橐尲t球進(jìn)入黑球時(shí)，水平方向會(huì)被壓縮一下，然后再離開(kāi)黑球的時(shí)候，水平方向會(huì)被拉長(zhǎng)，如此一來(lái)才會(huì)更像有粘性的感覺(jué)，為了測(cè)試這個(gè)效果，可真是煞費(fèi)我的苦心呀！（不過(guò)這里有個(gè)要注意的地方，由于位置上會(huì)自動(dòng)去計(jì)算，所以要測(cè)試的話(huà)，最外層的effect寬度記得設(shè)為320px）
完成紅球之后，要讓兩顆藍(lán)色球合在一起再分開(kāi)，也是同樣的原理，下方列出兩顆藍(lán)色球的CSS，比較需要注意的地方是我讓藍(lán)色球合體之后會(huì)變大一些，分開(kāi)的時(shí)候也會(huì)拉長(zhǎng)。
.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就完成了一個(gè)粘粘的效果，坦白說(shuō)我也不太清楚這個(gè)效果可以用在哪里，不過(guò)如果用在水底世界或一些loading的特效，應(yīng)該是相當(dāng)不賴(lài)的！
關(guān)于“如何使用純CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
當(dāng)前題目：如何使用純CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果
標(biāo)題路徑：http://fisionsoft.com.cn/article/jgsphd.html
