国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

2501207950 / 657人閱讀

摘要：拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果就這樣，你已經(jīng)知道如何用來(lái)制作，同理，也是用同樣的方法，只是把圖層換成了而已，就這么簡(jiǎn)單。

翻譯自《CSS Sticky Ball》

這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個(gè)用圖層和色版來(lái)制作，一個(gè)則是用CSS（把div當(dāng)成圖層思考就好了）。

從PhotoShop開始

一開始我們來(lái)玩Photoshop，會(huì)比直接寫CSS來(lái)得容易理解（沒有Photoshop的人也沒關(guān)系，看完說明也就懂了），首先我們新增兩個(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)該是這樣：

class="effect">
  <div class="blackball">div>
  
class="redball">div>
</div>

只要對(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寫了很多，因?yàn)橐尲t球進(jìn)入黑球時(shí)，水平方向會(huì)被壓縮一下，然后再離開黑球的時(shí)候，水平方向會(huì)被拉長(zhǎng)，如此一來(lái)才會(huì)更像有粘性的感覺，為了測(cè)試這個(gè)效果，可真是煞費(fèi)我的苦心呀！（不過這里有個(gè)要注意的地方，由于位置上會(huì)自動(dòng)去計(jì)算，所以要測(cè)試的話，最外層的effect寬度記得設(shè)為320px）

完成紅球之后，要讓兩顆藍(lán)色球合在一起再分開，也是同樣的原理，下方列出兩顆藍(lán)色球的CSS，比較需要注意的地方是我讓藍(lán)色球合體之后會(huì)變大一些，分開的時(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è)粘粘的效果，坦白說我也不太清楚這個(gè)效果可以用在哪里，不過如果用在水底世界或一些loading的特效，應(yīng)該是相當(dāng)不賴的！

獲取粘粘球完整動(dòng)畫代碼可以：

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/6741.html

相關(guān)文章

  • CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

    摘要：拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果就這樣，你已經(jīng)知道如何用來(lái)制作，同理，也是用同樣的方法，只是把圖層換成了而已，就這么簡(jiǎn)單。 這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個(gè)用圖層和色版來(lái)制作，一個(gè)則是用CSS（把div當(dāng)...

    taoszu 評(píng)論0 收藏0

  • CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

    摘要：拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果就這樣，你已經(jīng)知道如何用來(lái)制作，同理，也是用同樣的方法，只是把圖層換成了而已，就這么簡(jiǎn)單。 這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個(gè)用圖層和色版來(lái)制作，一個(gè)則是用CSS（把div當(dāng)...

    Yuanf 評(píng)論0 收藏0

  • CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

    摘要：拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果就這樣，你已經(jīng)知道如何用來(lái)制作，同理，也是用同樣的方法，只是把圖層換成了而已，就這么簡(jiǎn)單。 這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個(gè)用圖層和色版來(lái)制作，一個(gè)則是用CSS（把div當(dāng)...

    k00baa 評(píng)論0 收藏0

  • CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

    摘要：拉到邊緣不再模糊之后，你就可以用鼠標(biāo)嘗試著把紅球移動(dòng)，就會(huì)發(fā)現(xiàn)紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果就這樣，你已經(jīng)知道如何用來(lái)制作，同理，也是用同樣的方法，只是把圖層換成了而已，就這么簡(jiǎn)單。 翻譯自《CSS Sticky Ball》 這是一個(gè)純粹利用CSS所做出來(lái)的效果，這個(gè)效果說穿了就是一個(gè)圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是...

    番茄西紅柿 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

    摘要：擼代碼實(shí)現(xiàn)首頁(yè)檢驗(yàn)單查詢成品通用標(biāo)準(zhǔn)審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對(duì)角線，將作為邊的相交點(diǎn)。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right...

    _Dreams 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<