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)。
