這篇文章主要介紹“CSS3怎么創(chuàng)建帶有反彈特效的動畫”，在日常操作中，相信很多人在CSS3怎么創(chuàng)建帶有反彈特效的動畫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3怎么創(chuàng)建帶有反彈特效的動畫”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

海陵網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,海陵網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為海陵上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的海陵做網(wǎng)站的公司定做！

你知道嗎，那些使用CSS transform屬性添加進(jìn)HTML的元素是可以實現(xiàn)動畫效果的。我們可以使用transition屬性和@keyframe動畫來實現(xiàn)這個效果，但是更炫酷的是，我們可以使用cubic-bezier()這個timing function，給動畫添加一些反彈特效，從而讓它看上去更好看。

簡單來說，CSS中的cubic-bezier()，就是一個用來創(chuàng)建過渡效果的timing function。它可以定義過渡的速度和其他一些指標(biāo)，它也可以用來創(chuàng)建動畫中的反彈特效。

在這篇文章中，我們首先將會創(chuàng)建一個簡單的變換動畫，然后我們給它添加cubic-bezier()。在讀完這篇文章之后，你將會了解如何創(chuàng)建一個同時使用了扇出效果和反彈特效的動畫。

1.?制作扇葉

這個扇出效果是由5個扇葉所組成的。我們需要使用CSS的圓角(border-radius )屬性來制作這些扇葉。具體請參看下圖：

圓角屬性有很多種不同的語法。在這里我們將會使用一種比較復(fù)雜的語法：

border-radius: htl htr hbr hbl / vtl vtr vbr vbl;

在這個語法中，橫向和縱向的半徑被放在了一起；h和v分別代表了橫向半徑和縱向半徑，t、l、b和r分別代表的是頂部(top)、左側(cè)(left)、底部(bottom)和右側(cè)(right)。例如，vbl代表的左下角的縱向半徑。

如果你給橫向或是縱向半徑只設(shè)定了一個值，那么瀏覽器會將這個值復(fù)制到其他所有的橫向或是縱向半徑。

為了做出豎直的橢圓形狀，你需要在所有角上讓橫向半徑保持50%的比例，然后調(diào)節(jié)縱向半徑，直到你獲得了滿意的形狀。橫向半徑只會使用一個值：50%。

左上角和右上角上，縱向半徑為30%，左下角和右下角上，縱向半徑的值為70%。

HTML

CSS

.pinStarLeaf { width:60px; height:120px; border-radius:50%/30% 30% 70% 70%; background-color:#B8F0F5; }

2. 擴(kuò)大扇葉數(shù)量

由于扇出效果需要5個扇葉，因此我們還需要再制作4個扇葉，并且為他們指定不同的顏色。除此之外，我們還需要指定一個絕對定位(absolute positioning)，讓5個扇葉在動畫結(jié)束的時候重疊在一起。

HTML

CSS

#pinStarWrapper{ width:300px; height:300px; position:relative; }

.pinStarLeaf{ width:60px; height:120px; position:absolute; border-radius:50%/30% 30% 70% 70%; left:0; right:0; top:0; bottom:0; margin:auto; opacity:.5; }

.pinStarLeaf:nth-of-type(1){ background-color:#B8F0F5; }

.pinStarLeaf:nth-of-type(2){ background-color:#9CF3DC; }

.pinStarLeaf:nth-of-type(3){ background-color:#94F3B0; }

.pinStarLeaf:nth-of-type(4){ background-color:#D2F8A1; }

.pinStarLeaf:nth-of-type(5){ background-color:#F3EDA2; }

3. 識別用戶點擊行為，改進(jìn)美學(xué)效果

我們要使用#pinStarCenterChkBox這個識別符來添加一個checkbox，從而捕捉用戶的點擊行為。當(dāng)checkbox被選中之后，扇出效果會馬上呈現(xiàn)(扇葉開始旋轉(zhuǎn))。我們還要用#pinStarCenter識別符來添加一個白色的原型，從而提升美學(xué)效果。這個原型要放在扇出效果的最中心。

HTML

我們要先放置checkbox，然后是白色的圓和扇葉：

CSS

#pinStarCenter, #pinStarCenterChkBox{ width:45px; height:50px; position:absolute; left:0; right:0; top:-60px; bottom:0; margin:auto; background-color:#fff; border-radius:50%; cursor:pointer; }

#pinStarCenter, .pinStarLeaf{ pointer-events:none; }

#pinStarCenter > input[type="checkbox"]{ width:100%; height:100%; cursor:pointer; }

由于每一個扇葉都要按照不同的角度沿z軸旋轉(zhuǎn)，因此我們要為它們制定好過渡：rotatez();。我們還要給旋轉(zhuǎn)特性應(yīng)用transition屬性。

#pinStarCenterChkBox:checked —— .pinStarLeaf{ transition:transform 1s linear; }

#pinStarCenterChkBox:checked —— .pinStarLeaf:nth-of-type(5){ transform:rotatez(35deg); }

#pinStarCenterChkBox:checked —— .pinStarLeaf:nth-of-type(4){ transform:rotatez(105deg); }

#pinStarCenterChkBox:checked —— .pinStarLeaf:nth-of-type(3){ transform:rotatez(180deg); }

#pinStarCenterChkBox:checked —— .pinStarLeaf:nth-of-type(2){ transform:rotatez(255deg); }

#pinStarCenterChkBox:checked —— .pinStarLeaf:nth-of-type(1){ transform:rotatez(325deg); }

仔細(xì)看看上面的CSS代碼，你會發(fā)現(xiàn)#pinStarCenterChkBox:checked ——這個識別符，只有在checkbox被勾選之后(也就是用戶點擊之后)，動畫效果才會開始。

4. 對旋轉(zhuǎn)的中心進(jìn)行修改

默認(rèn)情況下，旋轉(zhuǎn)的中心位于旋轉(zhuǎn)元素的中間。但是在我們的效果中，它應(yīng)該位于所有扇葉的中心點，因此我們需要對其進(jìn)行移動。我們可以使用CSS的transform-orgin屬性來實現(xiàn)這個目的。

為了讓旋轉(zhuǎn)特效正常工作，我們要在CSS文件中的.pinStarLeaf選擇器中添加下面兩條規(guī)則：

.pinStarLeaf{ transform-origin:30px 30px; transition:transform 1s linear; }

截止到目前為止，旋轉(zhuǎn)特效已經(jīng)做出來了，但是這個動畫還沒有使用反彈特效。

現(xiàn)在我們來添加反彈特效，我們需要將現(xiàn)行的timing function替換為cubic-bezier()。

但是首先，為了更好的了解什么是反彈特效，我們先來試著了解一下cubic-bezier()這個timing function的工作方式。

cubic-bezier()的語法是這樣的，d和t分別代表了距離(distance)和時間(time)，他們的值通常是0到1之間的數(shù)字：

cubic-bezier (t1, d1, t2, d2)

雖然用距離和時間這樣的詞匯來解釋CSS中的cubic-bezier()并不是非常精確，但是這樣說的時候我們比較容易理解。

假設(shè)存在一個能在6秒內(nèi)從A點移動到B點的盒子。我們使用下面的cubic-bezier()來實現(xiàn)這次過渡，令t1=0，d1=1。

cubic-bezier(0,1,0,0)

這個盒子會幾乎立刻從A點移動到中間點，然后用剩下的時間在移動到B點。

現(xiàn)在我們令t1=1，d1=0，在來看看過渡的效果。

你會發(fā)現(xiàn)在最初的3秒內(nèi)，盒子幾乎不動，之后它幾乎直接跳到了中間點，然后再穩(wěn)步移動到B點。

你也許已經(jīng)發(fā)現(xiàn)了，d1控制的是A點到中間點之間的距離，t1控制的是從A點到中間點所用的時間。

現(xiàn)在我們來添加d2和t2.令t1和d1的值都為1，令t2=2，d2=0。盒子會在前三秒內(nèi)穩(wěn)步過渡到中間點(因為t1=1，d1=1)，然后立刻跳到B點。

現(xiàn)在我們來移除t2和d2的值。

盒子會在前三秒內(nèi)穩(wěn)步過渡到中間點(因為t1=1，d1=1)，然后停止接近3秒的時間，之后立刻跳到B點。

也就是說，d2和t2分別控制了盒子從中間點到B點的距離和時間。

5. 使用Cubic-Bezier()添加反彈特效

在使用反彈特效的時候，最主要的參數(shù)就是以距離，也就是d1和d2。當(dāng)d1的值小于1時，它會讓盒子在想B點移動之前時，先退回到A點之前。

當(dāng)d2的值大于1時，它會讓盒子達(dá)到B點之后，再超越B點一段距離，然后再最終回到B點靜止。我現(xiàn)在將會在代碼中直接添加cubic-bezier()的值，這樣你們就可以看到最終效果了。

#pinStarCenterChkBox:checked —— .pinStarLeaf{ transition:transform 1s cubic-bezier(.8,-.5,.2,1.4); }

到此，關(guān)于“CSS3怎么創(chuàng)建帶有反彈特效的動畫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當(dāng)前名稱：CSS3怎么創(chuàng)建帶有反彈特效的動畫
地址分享：http://weahome.cn/article/jjspgp.html