CSS3怎么創(chuàng)建帶有反彈特效的動畫

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

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

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

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

　　1.?制作扇葉

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

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

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

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

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

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

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

　　HTML

　　CSS

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

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

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

　　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. 識別用戶點(diǎn)擊行為，改進(jìn)美學(xué)效果

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

　　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; }

　　由于每一個(gè)扇葉都要按照不同的角度沿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 ——這個(gè)識別符，只有在checkbox被勾選之后(也就是用戶點(diǎn)擊之后)，動畫效果才會開始。

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

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

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

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

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

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

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

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

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

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

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

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

　　這個(gè)盒子會幾乎立刻從A點(diǎn)移動到中間點(diǎn)，然后用剩下的時(shí)間在移動到B點(diǎn)。

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

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

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

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

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

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

　　也就是說，d2和t2分別控制了盒子從中間點(diǎn)到B點(diǎn)的距離和時(shí)間。

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

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

　　當(dāng)d2的值大于1時(shí)，它會讓盒子達(dá)到B點(diǎn)之后，再超越B點(diǎn)一段距離，然后再最終回到B點(diǎn)靜止。我現(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é)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！