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

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

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

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

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

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

1.?制作扇葉

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

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

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

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

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

為了做出豎直的橢圓形狀，你需要在所有角上讓橫向半徑保持50%的比例，然后調(diào)節(jié)縱向半徑，直到你獲得了滿(mǎn)意的形狀。橫向半徑只會(huì)使用一個(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è)絕對(duì)定位(absolute positioning)，讓5個(gè)扇葉在動(dòng)畫(huà)結(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. 識(shí)別用戶(hù)點(diǎn)擊行為，改進(jìn)美學(xué)效果

我們要使用#pinStarCenterChkBox這個(gè)識(shí)別符來(lái)添加一個(gè)checkbox，從而捕捉用戶(hù)的點(diǎn)擊行為。當(dāng)checkbox被選中之后，扇出效果會(huì)馬上呈現(xiàn)(扇葉開(kāi)始旋轉(zhuǎn))。我們還要用#pinStarCenter識(shí)別符來(lái)添加一個(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)，因此我們要為它們制定好過(guò)渡：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代碼，你會(huì)發(fā)現(xiàn)#pinStarCenterChkBox:checked ——這個(gè)識(shí)別符，只有在checkbox被勾選之后(也就是用戶(hù)點(diǎn)擊之后)，動(dòng)畫(huà)效果才會(huì)開(kāi)始。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

到此，關(guān)于“CSS3怎么創(chuàng)建帶有反彈特效的動(dòng)畫(huà)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

本文名稱(chēng)：CSS3怎么創(chuàng)建帶有反彈特效的動(dòng)畫(huà)
網(wǎng)頁(yè)鏈接：http://bm7419.com/article18/jjspgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器、企業(yè)網(wǎng)站制作、微信小程序、網(wǎng)站收錄、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)