10個(gè)可以提升開(kāi)發(fā)效率的CSS輔助工具，快速生成常用代碼片段
大家好，今天給大家推薦幾個(gè)我一直在用的 css輔助工具，可快速生成常用css代碼片段，讓你開(kāi)效率大大提升， 同時(shí)也是非常好的學(xué)習(xí)資源。
box-shadow陰影預(yù)覽及代碼生成
可以非?？焖俚慕o元素設(shè)置box-shadow的屬性值，水平位移、垂直位移、模糊半徑、色值等，還可以隨時(shí)查看代碼。
資源地址：https://www.html.cn/tool/css3Preview/Box-Shadow.html
漸變代碼生成器
可快速設(shè)置漸變類(lèi)型、漸變方向、漸變的范圍。
資源地址：http://www.internetke.com/jsEffects/2014120803/
漸變配色方案網(wǎng)站
看似和上面的工具有些相似，其實(shí)差別很大的。該網(wǎng)站是專(zhuān)門(mén)提供漸變色效果的站點(diǎn)，里面接近上百種漸變配色方案，可根據(jù)自己風(fēng)格來(lái)選擇搭配，能直接獲得對(duì)應(yīng)漸變配色的 CSS 代碼。
資源地址：https://uigradients.com/#RoyalBlue
動(dòng)畫(huà)緩動(dòng)函數(shù)預(yù)覽+代碼生成
選擇動(dòng)畫(huà)類(lèi)型，配置動(dòng)畫(huà)時(shí)長(zhǎng)和動(dòng)作，即刻生成預(yù)覽和代碼。
資源地址：https://xuanfengge.com/easeing/ceaser/
雪碧圖合成+代碼生成
簡(jiǎn)單3步拿到合成圖和代碼，這比起自己手寫(xiě)效率要高的多，是個(gè)好工具。
上傳要合成的圖片 選擇圖片的padding值 設(shè)置圖片組合的方向 下載圖片、復(fù)制代碼
資源地址：https://www.toptal.com/developers/css/sprite-generator
css3 loading動(dòng)畫(huà)效果代碼生成器
這是一個(gè)專(zhuān)門(mén)搞各種加載效果的網(wǎng)站，僅使用（transform?和?opacity）CSS 動(dòng)畫(huà)來(lái)創(chuàng)建平滑且易于自定義的動(dòng)畫(huà)。當(dāng)然也提供了源碼，如果正好需要可以直接復(fù)制過(guò)來(lái)。
目前該網(wǎng)站已有11種純css實(shí)現(xiàn)的loading動(dòng)畫(huà)。
"spinner"> .spinner?{
??width:?40px;
??height:?40px;
??background-color:?#333;
??margin:?100px?auto;
??-webkit-animation:?sk-rotateplane?1.2s?infinite?ease-in-out;
??animation:?sk-rotateplane?1.2s?infinite?ease-in-out;
}
@-webkit-keyframes?sk-rotateplane?{
??0%?{?-webkit-transform:?perspective(120px)?}
??50%?{?-webkit-transform:?perspective(120px)?rotateY(180deg)?}
??100%?{?-webkit-transform:?perspective(120px)?rotateY(180deg)??rotateX(180deg)?}
}
@keyframes?sk-rotateplane?{
??0%?{?
????transform:?perspective(120px)?rotateX(0deg)?rotateY(0deg);
????-webkit-transform:?perspective(120px)?rotateX(0deg)?rotateY(0deg)?
??}?50%?{?
????transform:?perspective(120px)?rotateX(-180.1deg)?rotateY(0deg);
????-webkit-transform:?perspective(120px)?rotateX(-180.1deg)?rotateY(0deg)?
??}?100%?{?
????transform:?perspective(120px)?rotateX(-180deg)?rotateY(-179.9deg);
????-webkit-transform:?perspective(120px)?rotateX(-180deg)?rotateY(-179.9deg);
??}
}
資源地址：https://tobiasahlin.com/spinkit/
入場(chǎng)出廠(chǎng)、文字、背景動(dòng)畫(huà)生成器
視頻剪輯工具相信大家都用過(guò)，可以配置某個(gè)視頻的入場(chǎng)和出廠(chǎng)動(dòng)畫(huà)，以及文字的動(dòng)畫(huà)。而這個(gè)網(wǎng)站就是專(zhuān)門(mén)用css來(lái)實(shí)現(xiàn)這些效果。還有背景圖和背景顏色動(dòng)畫(huà)。
動(dòng)畫(huà)類(lèi)型設(shè)計(jì)的非常全面，網(wǎng)站體驗(yàn)很棒，除了可以復(fù)制代碼外，也是個(gè)不錯(cuò)的學(xué)習(xí)工具。
偷個(gè)懶，只放了靜態(tài)圖，有興趣的一定要打開(kāi)體驗(yàn)下。
資源地址：https://animista.net/play/entrances/slide-in-blurred
工作中常用效果總結(jié)
網(wǎng)站1 - You-need-to-know-css
筆者把自己的收獲和工作中常用的一些 CSS 小樣式總結(jié)成這份文檔，該項(xiàng)目整理了 CSS 的各種布局以及效果實(shí)現(xiàn)，同時(shí)提供了完整的實(shí)現(xiàn)代碼。
目前文檔一共包含 43 個(gè) CSS 的小樣式（持續(xù)更新中）是非常不錯(cuò)的學(xué)習(xí)資源。
資源地址：https://lhammer.cn/You-need-to-know-css/#/zh-cn/multiple-borders
網(wǎng)站2 - CSS Tricks
總結(jié)一些常用的 CSS 樣式，記錄一些 CSS 的新屬性和一點(diǎn)奇技淫巧，沒(méi)有廢話(huà)，代碼簡(jiǎn)單易用，方便復(fù)制。
舉個(gè)栗子：卡券生成器
.hollow-one-circle{?width:?100px;?height:?100px;?position:?relative;?background:?radial-gradient(circle?at?0?50px,?transparent?10px,?#00adb5?0)?top?left/100px?100%?no-repeat;?}
資源地址：https://qishaoxuan.github.io/css_tricks/
說(shuō)實(shí)話(huà)我還是偷懶了，閱讀體驗(yàn)上不太好，沒(méi)有把網(wǎng)站的動(dòng)畫(huà)效果做成gif。各位小伙伴有么有好用的gif工具呢？留言分享下吧。
以上就是本期分享。我是水月，動(dòng)動(dòng)發(fā)財(cái)?shù)男∈纸o咱來(lái)個(gè)點(diǎn)贊 + 在看?，祝大家都能心想事成、發(fā)大財(cái)、行大運(yùn)。