css3實戰(zhàn)匯總(附源碼)
本文是繼筆者之前文章用css3實現(xiàn)驚艷面試官的背景即背景動畫（高級附源碼）的續(xù)篇也是本人最后一篇介紹css3技巧的文章，因為css這塊知識難點不是很多，更多的在于去熟悉css3的新特性和基礎理論知識。
所以寫這篇文章的目的一方面是對自己工作中一些css高級技巧的總結(jié)，另一方面也是希望能教大家一些實用的技巧和高效開發(fā)css的方式，以提高在工作中的效率。
我們將學到
box-shadow的高級應用
制作自適應的橢圓
純css3實現(xiàn)餅圖進度動畫
用border來實現(xiàn)一個對話框樣式
css3 filter的簡單應用
css3偽元素實現(xiàn)自定義復選框
在線制作css3動畫的利器
正文
1.box-shadow 的高級應用
利用css3的新特性可以幫助我們實現(xiàn)各種意想不到的特效，接下來的幾個案例我們來使用css3的box-shdow來實現(xiàn)，馬上開始吧！
實現(xiàn)水波動畫
知識點：box-shadow
想想我們?nèi)绻挥胏ss3，是怎么實現(xiàn)水波擴散的動畫呢？想必一定是寫一大堆的js才能實現(xiàn)如下的效果：
css3實現(xiàn)核心代碼
<style>.wave {margin-left: auto;margin-right: auto;width: 100px;height: 100px;border-radius: 100px;border: 2px solid #fff;text-align: center;line-height: 100px;color: #fff;background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;background-size: 100%;animation: wave 4s linear infinite;}@keyframes wave {0% {box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);}50% {box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);}100% {box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);}}style><div class="wave">div>
這里我們主要使用了box-shadow的多級陰影來實現(xiàn)的，動畫部分我們使用的@keyframes，是不是感覺還行？
實現(xiàn)加載動畫
知識點：box-shadow多陰影
加載動畫大家想必也不陌生，雖然可以用很多方式實現(xiàn)加載動畫，比如用偽元素，用gif，用js，但是更優(yōu)雅的實現(xiàn)我覺得還是直接上css：
核心代碼如下：
<style>.loading {margin-left: auto;margin-right: auto;width: 30px;height: 30px;border-radius: 30px;background-color: transparent;animation: load 3s linear infinite;}@keyframes load {0% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 0);}30% {box-shadow: -40px 0 0 rgba(250, 189, 189, 1),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 0);}60% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 1),40px 0 0 rgba(250, 189, 189, 0);}100% {box-shadow: -40px 0 0 rgba(250, 189, 189, 0),inset 0 0 0 15px rgba(250, 189, 189, 0),40px 0 0 rgba(250, 189, 189, 1);}}style><div?class="loading">div>
我們這里也是采用box-shadow多背景來實現(xiàn)，也是我當時思考的一個方向，至于其他的css方案，歡迎大家和我交流。
實現(xiàn)對話框及對話框的不規(guī)則投影
知識點：filter和偽元素
這里涉及到css濾鏡的知識，不過也很簡單，大家在css3官網(wǎng)上看看就理解了，我們直接看效果：
我們會通過filter的drop-shadow來實現(xiàn)不規(guī)則圖形的陰影，然后利用偽元素和border來實現(xiàn)頭部三角形：
<style>.odd-shadow{margin-left: auto;margin-right: auto;width: 200px;height: 80px;border-radius: 8px;color: #fff;font-size: 24px;text-align: center;line-height: 80px;background: #06c;filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))}.odd-shadow::before{content: '';position: absolute;display: block;margin-left: -20px;transform: translateY(20px);width:0;height: 0;border: 10px solid transparent;border-right-color: #06c;}style><div class="odd-shadow">哎呦，豬先森div>復制代碼
模糊效果
知識點：filter
這個比較簡單，這里我直接上圖和代碼：
filter:?blur(20px)2.制作自適應的橢圓
border-radius的出現(xiàn)讓我們實現(xiàn)圓角效果提供了極大的便利，我們還可以通過對Border-radius特性的進一步研究來實現(xiàn)各種圖形效果，接下來就讓我們看看它的威力吧！
知識點:border-radius: a / b;????//a,b分別為圓角的水平、垂直半徑,單位若為%,則表示相對于寬度和高度進行解析
核心代碼：
<style>.br-1{width: 200px;height: 100px;border-radius: 50% /10%;background: linear-gradient(45deg,#06f,#f6c,#06c);}.br-2{width: 100px;border-radius: 20% 50%;}.ani{animation: skew 4s infinite;}.ani1{animation: skew1 4s infinite 2s;}.ani2{animation: skew2 4s infinite 3s;}@keyframes skew{to{border-radius: 50%;}}@keyframes skew1{to{border-radius: 20px 20px 100%;}}@keyframes skew2{to{transform: rotate(360deg);}}style><div class="br-1 black-theme">div><div class="br-1 black-theme ani">div><div class="br-1 black-theme ani1">div><div class="br-1 br-2 black-theme ani2">div>
這里我們主要使用了背景漸變來實現(xiàn)華而不實的背景，用border-radius實現(xiàn)各種規(guī)格的橢圓圖案。
3.純css3實現(xiàn)餅圖進度動畫
知識點：border-radius: a b c d / e f g h; animation多動畫屬性;
效果如下：
核心代碼：
<style>.br-31{width: 100px;height: 100px;border-radius: 50%;background: linear-gradient(to right,#f6c 50%,#333 0);}.br-31::before{content: '';display: block;margin-left: 50%;height: 100%;border-radius: 0 100% 100% 0 / 50%;background-color: #f6c;transform-origin: left;animation: skin 4s linear infinite,bg 8s step-end infinite;}@keyframes skin{to{transform: rotate(.5turn);}}@keyframes bg{50%{background: #333;}}.br-32::before{animation-play-state: paused;animation-delay: inherit;}style><div class="br-31 black-theme">div><div class="br-31 br-32 black-theme" style="animation-delay:-1s">div>復制代碼
這塊的實現(xiàn)我們主要用了漸變背景，也是實現(xiàn)扇形進度的關鍵，包括代碼中的如何遮擋半圓，如何對半圓做動畫，如何改變旋轉(zhuǎn)原點的位置等，這些雖然技巧性很強，但是我們稍微畫一畫，也可以實現(xiàn)的。
4.css3偽元素實現(xiàn)自定義復選框
我們都知道原生的復選框控件樣式極難自定義，這對于工程師實現(xiàn)設計稿的難度加大了一大截。css3的出現(xiàn)，增加了:checked選擇器，因此我們可以利用:checked和label來實現(xiàn)各式各樣的表單選擇控件，接下來讓我們來看看如何實現(xiàn)吧！
我們來看看如何實現(xiàn)上述自定義的復選框：
<style>.check-wrap{text-align: center;}.checkbox{position: absolute;clip: rect(0,0,0,0);}.checkbox[type="checkbox"]:focus + label::before{box-shadow: 0 0 .6em #06c;}.checkbox[type="checkbox"] + label::before{content: '\a0'; /* 不換行空格 */display: inline-block;margin-right: .3em;width: 2em;height: 2em;border-radius: .3em;vertical-align: middle;line-height: 2em; /* 關鍵 */font-size: 20px;text-align: center;color: #fff;background: gray;}.checkbox[type="checkbox"]:checked + label::before{content: '\2713'; /* 對勾 */background: black;}label{margin-right: 40px;font-size: 20px;}style><div class="check-wrap"><input type="checkbox" class="checkbox" id="check-1" /><label for="check-1">生男孩label><input type="checkbox" class="checkbox" id="check-2" /><label for="check-2">生女孩label>div>
這里為了隱藏原生的checkbox控件，我們用了clip: rect(0,0,0,0)進行截取，然后使用checkbox的偽類:checked來實現(xiàn)交互。
接下來擴展一下，我們來實現(xiàn)自定義開關：
這里原理是一樣的，只不過樣式做了改動，直接上代碼：
<style>.check-wrap{margin-bottom: 20px;text-align: center;}.switch{position: absolute;clip: rect(0,0,0,0);}.switch[type="checkbox"] + label{width: 6em;height: 3em;padding: .3em;border-radius: .3em;border: 1px solid rgba(0,0,0,.2);vertical-align: middle;line-height: 2em; /* 關鍵 */font-size: 20px;text-align: center;color: #fff;box-shadow: 0 1px white inset;background-color: #ccc;background-image: linear-gradient(#ddd,#bbb);}.switch[type="checkbox"]:checked + label{box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;border-color: rgba(0,0,0,.3);background: #bbb;}label{margin-right: 40px;font-size: 14px;}.switch-an{position: absolute;clip: rect(0,0,0,0);}.switch-an[type="checkbox"] + label{position: relative;display: inline-block;width: 5em;height: 2em;border-radius: 1em;color: #fff;background: #06c;text-align: left;}.switch-an[type="checkbox"] + label::before{content: '';width:2em;height: 2em;position: absolute;left: 0;border-radius: 100%;vertical-align: middle;background-color: #fff;transition: left .3s;}.switch-an[type="checkbox"] + label::after{content: 'OFF';margin-left: 2.6em;}.switch-an[type="checkbox"]:checked + label::before{transition: left .3s;left: 3em;}.switch-an[type="checkbox"]:checked + label::after{content: 'NO';margin-left: .6em;}style><div class="check-wrap"><input type="checkbox" class="switch" id="switch-1" /><label for="switch-1">生男孩label><input type="checkbox" class="switch" id="switch-2" /><label for="switch-2">生女孩label>div><div class="check-wrap"><input type="checkbox" class="switch-an" id="switch-an-1" /><label for="switch-an-1">label>div>
是不是感覺css3提供了更強大的動畫和自定義功能呢？其實我們可以實現(xiàn)更酷炫更實用的效果，等待你去嘗試。
5.在線制作css3動畫的利器
最后推薦一個在線制作各種貝塞爾曲線的工具，也是本人在做動畫時經(jīng)常使用的：?
??? cubic-bezier。
地址：https://cubic-bezier.com/#.17,.67,.83,.67
H5-Dooring, 讓H5制作, 更簡單
好啦, 今天的分享就到這啦, 如果文章對你有幫助, 歡迎?「點贊」?+?「在看」, 鼓勵作者創(chuàng)造更優(yōu)質(zhì)的內(nèi)容~
點個在看你最好看