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