CSS3應(yīng)用實(shí)例分析

這篇文章主要介紹“CSS3應(yīng)用實(shí)例分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS3應(yīng)用實(shí)例分析”文章能幫助大家解決問(wèn)題。

1.box-shadow的高級(jí)應(yīng)用

利用css3的新特性可以幫助我們實(shí)現(xiàn)各種意想不到的特效，接下來(lái)的幾個(gè)案例我們來(lái)使用css3的box-shdow來(lái)實(shí)現(xiàn)，馬上開(kāi)始吧！

實(shí)現(xiàn)水波動(dòng)畫(huà)

知識(shí)點(diǎn)：box-shadow

想想我們?nèi)绻挥胏ss3，是怎么實(shí)現(xiàn)水波擴(kuò)散的動(dòng)畫(huà)呢？想必一定是寫(xiě)一大堆的js才能實(shí)現(xiàn)如下的效果：

css3實(shí)現(xiàn)核心代碼

這里我們主要使用了box-shadow的多級(jí)陰影來(lái)實(shí)現(xiàn)的，動(dòng)畫(huà)部分我們使用的@keyframes，是不是感覺(jué)還行？

實(shí)現(xiàn)加載動(dòng)畫(huà)

知識(shí)點(diǎn)：box-shadow多陰影

加載動(dòng)畫(huà)大家想必也不陌生，雖然可以用很多方式實(shí)現(xiàn)加載動(dòng)畫(huà)，比如用偽元素，用gif，用js，但是更優(yōu)雅的實(shí)現(xiàn)我覺(jué)得還是直接上css：

核心代碼如下：

我們這里也是采用box-shadow多背景來(lái)實(shí)現(xiàn)，也是我當(dāng)時(shí)思考的一個(gè)方向，至于其他的css方案，歡迎大家和我交流。

實(shí)現(xiàn)對(duì)話框及對(duì)話框的不規(guī)則投影

知識(shí)點(diǎn)： filter和偽元素

這里涉及到css濾鏡的知識(shí)，不過(guò)也很簡(jiǎn)單，大家在css3官網(wǎng)上看看就理解了，我們直接看效果：

我們會(huì)通過(guò)filter的drop-shadow來(lái)實(shí)現(xiàn)不規(guī)則圖形的陰影，然后利用偽元素和border來(lái)實(shí)現(xiàn)頭部三角形：

模糊效果

知識(shí)點(diǎn)： filter

這個(gè)比較簡(jiǎn)單，這里我直接上圖和代碼：

2.制作自適應(yīng)的橢圓

border-radius的出現(xiàn)讓我們實(shí)現(xiàn)圓角效果提供了極大的便利，我們還可以通過(guò)對(duì)Border-radius特性的進(jìn)一步研究來(lái)實(shí)現(xiàn)各種圖形效果，接下來(lái)就讓我們看看它的威力吧！

知識(shí)點(diǎn):border-radius: a / b; //a,b分別為圓角的水平、垂直半徑,單位若為%,則表示相對(duì)于寬度和高度進(jìn)行解析

CSS3實(shí)戰(zhàn)匯總，讓你在前端路上獨(dú)秀一枝（附源碼）

核心代碼：

這里我們主要使用了背景漸變來(lái)實(shí)現(xiàn)華而不實(shí)的背景，用border-radius實(shí)現(xiàn)各種規(guī)格的橢圓圖案。

3.純css3實(shí)現(xiàn)餅圖進(jìn)度動(dòng)畫(huà)

知識(shí)點(diǎn)：border-radius: a b c d / e f g h; animation多動(dòng)畫(huà)屬性;

效果如下：

核心代碼：

這塊的實(shí)現(xiàn)我們主要用了漸變背景，也是實(shí)現(xiàn)扇形進(jìn)度的關(guān)鍵，包括代碼中的如何遮擋半圓，如何對(duì)半圓做動(dòng)畫(huà)，如何改變旋轉(zhuǎn)原點(diǎn)的位置等，這些雖然技巧性很強(qiáng)，但是我們稍微畫(huà)一畫(huà)，也可以實(shí)現(xiàn)的。

4.css3偽元素實(shí)現(xiàn)自定義復(fù)選框

我們都知道原生的復(fù)選框控件樣式極難自定義，這對(duì)于工程師實(shí)現(xiàn)設(shè)計(jì)稿的難度加大了一大截。css3的出現(xiàn)，增加了:checked選擇器，因此我們可以利用:checked和label來(lái)實(shí)現(xiàn)各式各樣的表單選擇控件，接下來(lái)讓我們來(lái)看看如何實(shí)現(xiàn)吧！

我們來(lái)看看如何實(shí)現(xiàn)上述自定義的復(fù)選框：

這里為了隱藏原生的checkbox控間，我們用了clip: rect(0,0,0,0)進(jìn)行截取，然后使用checkbox的偽類:checked來(lái)實(shí)現(xiàn)交互。

關(guān)于“CSS3應(yīng)用實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。